🐛 (js) Enable prefill for date input

baptisteArno · Mar 13, 2023 · a66a1e8 · a66a1e8 · vercel · Mar 13, 2023
1 parent f9aef90
commit a66a1e8
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/packages/js/package.json b/packages/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

diff --git a/packages/js/src/components/InputChatBlock.tsx b/packages/js/src/components/InputChatBlock.tsx
@@ -152,6 +152,7 @@ const Input = (props: {
       <Match when={props.block.type === InputBlockType.DATE}>
         <DateForm
           options={props.block.options as DateInputOptions}
+          defaultValue={getPrefilledValue()}
           onSubmit={onSubmit}
         />
       </Match>

diff --git a/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx b/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx
@@ -7,10 +7,14 @@ import { parseReadableDate } from '../utils/parseReadableDate'
 type Props = {
   onSubmit: (inputValue: InputSubmitContent) => void
   options?: DateInputOptions
+  defaultValue?: string
 }
 
 export const DateForm = (props: Props) => {
-  const [inputValues, setInputValues] = createSignal({ from: '', to: '' })
+  const [inputValues, setInputValues] = createSignal(
+    parseDefaultValue(props.defaultValue ?? '')
+  )
+
   return (
     <div class="flex flex-col">
       <div class="flex items-center">
@@ -50,6 +54,7 @@ export const DateForm = (props: Props) => {
                   'min-width': '100px',
                   'font-size': '16px',
                 }}
+                value={inputValues().from}
                 type={props.options?.hasTime ? 'datetime-local' : 'date'}
                 onChange={(e) =>
                   setInputValues({
@@ -74,6 +79,7 @@ export const DateForm = (props: Props) => {
                     'min-width': '100px',
                     'font-size': '16px',
                   }}
+                  value={inputValues().to}
                   type={props.options.hasTime ? 'datetime-local' : 'date'}
                   onChange={(e) =>
                     setInputValues({
@@ -98,3 +104,9 @@ export const DateForm = (props: Props) => {
     </div>
   )
 }
+
+const parseDefaultValue = (defaultValue: string) => {
+  if (!defaultValue.includes('to')) return { from: defaultValue, to: '' }
+  const [from, to] = defaultValue.split(' to ')
+  return { from, to }
+}
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",