@chem-po/react-web 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chem-po/react-web",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,8 +16,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@chem-po/core": "0.0.29",
-    "@chem-po/react": "0.0.29",
+    "@chem-po/core": "0.0.31",
+    "@chem-po/react": "0.0.31",
     "@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/select/index.tsx

@@ -1,7 +1,6 @@
 import {
   Button,
   Popover,
-  PopoverArrow,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
@@ -9,7 +8,7 @@ import {
   useColorMode,
 } from '@chakra-ui/react'
 import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
-import { SelectField } from '@chem-po/react'
+import { SelectField, useBackgroundColor } from '@chem-po/react'
 import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
 import { useInputStyles } from '../hooks/useInputStyles'
 import { InputContainer } from '../shared/InputContainer'
@@ -31,6 +30,7 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
         onBlur()
       },
     }))
+    const menuBg = useBackgroundColor(150)
 
     const DefaultRenderOption = (props: RenderSelectOptionProps) => {
       return <Text style={text}>{props.option.label}</Text>
@@ -66,7 +66,13 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
             </InputContainer>
           </Button>
         </PopoverTrigger>
-        <PopoverContent w="100%" overflowY="auto" maxH="300px">
+        <PopoverContent
+          w="100%"
+          overflowY="auto"
+          maxH="300px"
+          bg={menuBg}
+          border="none"
+          boxShadow="0 0 8px rgba(0, 0, 0, 0.3)">
           <PopoverBody p={0}>
             {options.map(o => (
               <Button
@@ -78,6 +84,10 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
                   onChange(o.value)
                   onBlur()
                 }}
+                display="flex"
+                justifyContent="flex-start"
+                alignItems="center"
+                px={3}
                 _hover={{ bg: 'blackAlpha.100' }}
                 _dark={{
                   _hover: { bg: 'whiteAlpha.100' },
@@ -92,7 +102,6 @@ export const SelectComponent = forwardRef<InputRef, FieldProps<SelectField>>(
               </Button>
             ))}
           </PopoverBody>
-          <PopoverArrow />
         </PopoverContent>
       </Popover>
     )

package/src/components/loading/LoadingImage.tsx

@@ -1,5 +1,5 @@
 import { BoxProps, Center, IconButton, Image, ImageProps } from '@chakra-ui/react'
-import { useMounted } from '@chem-po/react'
+import { useColorModeValue, useMounted } from '@chem-po/react'
 import React, { SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react'
 import { ImageViewOverlay } from '../overlay/ImageViewOverlay'
 import { LoadingLogo } from './Loading'
@@ -52,6 +52,11 @@ export const LoadingImage = ({
     if (src) setPrevSrc(src)
   }, [src, prevSrc])
 
+  const fullViewButtonFilter = useColorModeValue(
+    'none',
+    'brightness(300%) drop-shadow(1px 1px 3px #00000066)',
+  )
+
   const loading = imageLoading || !!loadingOverride
   return (
     <Center
@@ -97,7 +102,7 @@ export const LoadingImage = ({
               height="20px"
               src="/icons/open_in_full.svg"
               opacity={0.8}
-              filter="brightness(300%) drop-shadow(1px 1px 3px #00000066)"
+              filter={fullViewButtonFilter}
             />
           }
           onClick={() => setViewing(true)}

package/src/components/modal/DesktopModal.tsx

@@ -1,12 +1,16 @@
 import { Box, Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
+import { useBackgroundColor } from '@chem-po/react'
 import React from 'react'
 import { DefaultModalProps } from './type'
 
-export const DesktopModal = ({ children, isOpen, contentProps, ...props }: DefaultModalProps) => (
-  <Modal scrollBehavior="inside" isCentered isOpen={isOpen} {...props}>
-    <ModalOverlay />
-    <ModalContent position="relative" overflowY="auto" bg="background.100" {...contentProps}>
-      <Box>{children}</Box>
-    </ModalContent>
-  </Modal>
-)
+export const DesktopModal = ({ children, isOpen, contentProps, ...props }: DefaultModalProps) => {
+  const bg = useBackgroundColor(100)
+  return (
+    <Modal scrollBehavior="inside" isCentered isOpen={isOpen} {...props}>
+      <ModalOverlay />
+      <ModalContent position="relative" overflowY="auto" bg={bg} {...contentProps}>
+        <Box>{children}</Box>
+      </ModalContent>
+    </Modal>
+  )
+}

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'