@chem-po/react-web 0.0.28 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,8 +16,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@chem-po/core": "0.0.28",
-    "@chem-po/react": "0.0.28",
+    "@chem-po/core": "0.0.30",
+    "@chem-po/react": "0.0.30",
     "@chakra-ui/anatomy": "^2.3.4",
     "@chakra-ui/icons": "^2.2.4",
     "@chakra-ui/react": "^2.10.7",

package/src/components/form/input/Editable.tsx

@@ -1,8 +1,15 @@
 import { CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons'
 import { Flex, IconButton } from '@chakra-ui/react'
 import { palette } from '@chem-po/core'
-import { EditableProps, Field, useColorModeValue, useEditable } from '@chem-po/react'
-import React, { CSSProperties, useEffect, useMemo } from 'react'
+import {
+  CustomEditableViewProps,
+  EditableProps,
+  Field,
+  useColorModeValue,
+  useEditable,
+} from '@chem-po/react'
+import React, { CSSProperties, useCallback, useEffect, useMemo } from 'react'
+import { CustomInputProps } from '../../../types/forms'
 import { LoadingOverlay } from '../../loading/Loading'
 import { UploadProgress } from '../UploadProgress'
 import { FieldView } from '../view'
@@ -16,7 +23,11 @@ export const Editable = <T extends Field>({
   style,
   onEditClose,
   onEditOpen,
-}: EditableProps<CSSProperties, T>) => {
+  CustomInput,
+  CustomView,
+  containerStyle,
+  size,
+}: EditableProps<CSSProperties, CSSProperties, T>) => {
   const {
     inputRef,
     setValue,
@@ -38,7 +49,10 @@ export const Editable = <T extends Field>({
     onEditOpen,
     onEditClose,
   })
-  const alwaysEditing = useMemo(() => field._type === 'file' || field._type === 'boolean', [field])
+  const alwaysEditing = useMemo(
+    () => field && (field._type === 'file' || field._type === 'boolean'),
+    [field],
+  )
   useEffect(() => {
     if (isEditing) {
       inputRef.current?.focus()
@@ -47,12 +61,35 @@ export const Editable = <T extends Field>({
 
   const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
 
+  const RenderInput = useCallback(
+    (props: CustomInputProps<T['defaultValue']>) => {
+      if (CustomInput) {
+        return <CustomInput {...props} />
+      }
+      if (!field) throw new Error('Editable component must have a field OR a CustomInput')
+      return <StandaloneInput field={field} {...props} />
+    },
+    [CustomInput, field],
+  )
+
+  const RenderView = useCallback(
+    (props: CustomEditableViewProps<T['defaultValue']>) => {
+      if (CustomView) {
+        return <CustomView {...props} />
+      }
+      if (!field) throw new Error('Editable component must have a field OR a CustomView')
+      return <FieldView style={style} field={field} value={value} {...props} />
+    },
+    [CustomView, field, style, value],
+  )
+
   return (
     <Flex
       borderRadius={4}
       border={`1px dashed ${editHovered && !isEditing ? editingBorderColor : 'transparent'}`}
       flexFlow="column"
-      w="100%">
+      w="100%"
+      style={containerStyle}>
       <Flex align="center" px={1} position="relative" w="100%">
         <Flex
           opacity={isLoading ? 0 : 1}
@@ -62,16 +99,17 @@ export const Editable = <T extends Field>({
           flex={1}
           minW="0">
           {isEditing || alwaysEditing ? (
-            <StandaloneInput
+            <RenderInput
               ref={inputRef}
               value={value}
               inEditable
-              field={field}
               style={{ padding: 0, ...style }}
+              size={size}
               onChange={alwaysEditing ? v => submitValue(v) : setValue}
+              inputStyle={style}
             />
           ) : (
-            <FieldView style={style} field={field} value={value} />
+            <RenderView inEditable size={size} value={value} />
           )}
         </Flex>
         {alwaysEditing ? null : (

package/src/components/form/input/types.ts

@@ -1,4 +1,4 @@
 import { BaseFieldProps, Field } from '@chem-po/react'
 import { CSSProperties } from 'react'
 
-export type FieldProps<T extends Field> = BaseFieldProps<CSSProperties, T>
+export type FieldProps<T extends Field> = BaseFieldProps<CSSProperties, CSSProperties, T>

package/src/index.ts

@@ -2,3 +2,4 @@ export * from './components'
 export * from './contexts'
 export * from './hooks'
 export * from './store'
+export * from './types'

package/src/types/forms.ts

@@ -0,0 +1,5 @@
+import { BaseCustomInput, BaseCustomInputProps } from '@chem-po/react'
+import { CSSProperties } from 'react'
+
+export type CustomInput<Value> = BaseCustomInput<Value, CSSProperties, CSSProperties>
+export type CustomInputProps<Value> = BaseCustomInputProps<Value, CSSProperties, CSSProperties>

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './forms'