@chem-po/react-web 0.0.15 → 0.0.16

package/src/components/form/view/index.tsx

@@ -1,27 +1,18 @@
 import { Flex, Text } from '@chakra-ui/react'
 
 import { formatField } from '@chem-po/core'
-import { Field } from '@chem-po/react'
+import { Field, FormatField } from '@chem-po/react'
 import React, { CSSProperties, useMemo } from 'react'
 import { FileFieldView } from './file'
 import { MultipleSelectFieldView } from './multipleSelect'
 import { SelectFieldView } from './select'
+import { FieldViewProps } from './types'
 
-const DefaultFieldView = ({
-  field,
-  value,
-  noLabel,
-  style,
-}: {
-  field: Field
-  value: any
-  noLabel?: boolean
-  style?: CSSProperties
-}) => {
+const DefaultFieldView = <F extends Field>({ field, value, noLabel, style }: FieldViewProps<F>) => {
   const { placeholder } = field
 
   const formatted = useMemo(() => {
-    const format = formatField[field._type]
+    const format = formatField[field._type] as FormatField<F>
     if (!format) return value
     return format(field, value)
   }, [value, field])

package/src/components/form/view/multipleSelect.tsx

@@ -2,20 +2,27 @@ import { Box, Text } from '@chakra-ui/react'
 
 import { Flex, useColorMode } from '@chakra-ui/react'
 import { MultipleSelectField } from '@chem-po/react'
-import React, { CSSProperties } from 'react'
+import React, { useMemo } from 'react'
+import { useInputStyles } from '../input/hooks/useInputStyles'
+import { getRenderSelectedOptionText } from '../input/multipleSelect'
+import { FieldViewProps } from './types'
 
-export const MultipleSelectFieldView = ({
+export const MultipleSelectFieldView = <F extends MultipleSelectField>({
   field,
   value,
   noLabel,
   style,
-}: {
-  field: MultipleSelectField
-  value: any[]
-  noLabel?: boolean
-  style?: CSSProperties
-}) => {
-  const { placeholder, renderOption: RenderOption } = field
+}: FieldViewProps<F>) => {
+  const { placeholder, options } = field
+  const { size, text } = useInputStyles(undefined, field.size)
+  const selectedOptions = useMemo(
+    () => options.filter(o => value?.includes(o.value)),
+    [value, options],
+  )
+  const RenderSelectedOptionText = useMemo(
+    () => getRenderSelectedOptionText(field, text),
+    [field, text],
+  )
   const { colorMode } = useColorMode()
   return (
     <Flex maxW="100%" flexFlow="row wrap" align="center" style={style}>
@@ -24,10 +31,16 @@ export const MultipleSelectFieldView = ({
           {placeholder}
         </Text>
       )}
-      {value ? (
-        value.map((v: any) => (
-          <Box key={field.getOptionKey ? field.getOptionKey(v) : v} p={0.5}>
-            <RenderOption value={v} colorMode={colorMode} isSelected={true} />
+      {selectedOptions.length ? (
+        selectedOptions.map(o => (
+          <Box key={o.value} p={0.5}>
+            <RenderSelectedOptionText
+              value={o.value}
+              option={o}
+              colorMode={colorMode}
+              isSelected={true}
+              size={size}
+            />
           </Box>
         ))
       ) : (

package/src/components/form/view/select.tsx

@@ -1,6 +1,8 @@
 import { Flex, Text, useColorMode } from '@chakra-ui/react'
 import { SelectField } from '@chem-po/react'
-import React, { CSSProperties } from 'react'
+import React from 'react'
+import { useInputStyles } from '../input/hooks/useInputStyles'
+import { FieldViewProps } from './types'
 
 const stringifyValue = (value: any) => {
   if (typeof value === 'string') return value
@@ -18,14 +20,12 @@ export const SelectFieldView = <F extends SelectField>({
   value,
   noLabel,
   style,
-}: {
-  field: F
-  value: F['defaultValue']
-  noLabel?: boolean
-  style?: CSSProperties
-}) => {
+  size: propSize,
+}: FieldViewProps<F>) => {
   const { placeholder, renderOption: customRender } = field
   const { colorMode } = useColorMode()
+  const { size } = useInputStyles(undefined, field.size, propSize)
+  const selectedOption = field.options.find(o => o.value === value)
   const RenderOption = customRender ?? DefaultRenderOption
   return (
     <Flex align="center" style={style}>
@@ -34,7 +34,17 @@ export const SelectFieldView = <F extends SelectField>({
           {placeholder}
         </Text>
       )}
-      {value ? <RenderOption value={value} colorMode={colorMode} isSelected={true} /> : 'None'}
+      {value && selectedOption ? (
+        <RenderOption
+          value={value}
+          option={selectedOption}
+          colorMode={colorMode}
+          isSelected={true}
+          size={size}
+        />
+      ) : (
+        <Text>None</Text>
+      )}
     </Flex>
   )
 }

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

@@ -0,0 +1,11 @@
+import { InputSize } from '@chem-po/core'
+import { Field } from '@chem-po/react'
+import { CSSProperties } from 'react'
+
+export interface FieldViewProps<F extends Field> {
+  field: F
+  value: F['defaultValue']
+  noLabel?: boolean
+  size?: InputSize
+  style?: CSSProperties
+}

package/src/components/form/input/hooks/useInputStyle.ts

@@ -1,39 +0,0 @@
-import { InputSize } from '@chem-po/react'
-import { CSSProperties, useMemo } from 'react'
-
-const inputPaddingY: Record<InputSize, number> = {
-  xs: 0.25,
-  sm: 0.35,
-  md: 0.5,
-  lg: 0.5,
-  xl: 0.5,
-}
-
-const inputPaddingX: Record<InputSize, number> = {
-  xs: 0.5,
-  sm: 0.75,
-  md: 0.75,
-  lg: 0.75,
-  xl: 0.75,
-}
-const getInputPadding = (size: InputSize) => {
-  const paddingY = inputPaddingY[size]
-  const paddingX = inputPaddingX[size]
-  return `${paddingY}rem ${paddingX}rem`
-}
-const fontSize: Record<InputSize, string> = {
-  xs: '0.75rem',
-  sm: '0.875rem',
-  md: '1rem',
-  lg: '1.125rem',
-  xl: '1.25rem',
-}
-
-export const useInputStyle = (size?: InputSize) =>
-  useMemo<Partial<CSSProperties>>(
-    () => ({
-      padding: getInputPadding(size ?? 'md'),
-      fontSize: fontSize[size ?? 'md'],
-    }),
-    [size],
-  )