@chem-po/react-native 0.0.14 → 0.0.16

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

@@ -1,5 +1,10 @@
+import { InputSize } from '@chem-po/core'
 import { MultipleSelectField, useColorMode } from '@chem-po/react'
+import { useMemo } from 'react'
 import React, { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { useInputStyles } from '../input/hooks/useInputStyles'
+import { SelectedOptionContainer } from '../input/multipleSelect'
+import { DefaultRenderOption } from './select'
 
 const styles = StyleSheet.create({
   container: {
@@ -13,41 +18,63 @@ const styles = StyleSheet.create({
     opacity: 0.7,
     fontWeight: '600',
   },
-  optionContainer: {
+  optionsContainer: {
     padding: 2,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  optionContainer: {
+    marginTop: 2,
+    marginHorizontal: 2,
   },
   emptyText: {
     opacity: 0.6,
   },
 })
 
-export const MultipleSelectFieldView = ({
+export const MultipleSelectFieldView = <F extends MultipleSelectField>({
   field,
   value,
   noLabel,
+  size: sizeProp,
   style,
 }: {
-  field: MultipleSelectField
-  value: any[]
+  field: F
+  value?: F['defaultValue']
   noLabel?: boolean
+  size?: InputSize
   style?: ViewStyle
 }) => {
-  const { placeholder, renderOption: RenderOption } = field
+  const { placeholder, renderOption: customRender, options } = field
+  const selectedOptions = options.filter(o => value?.includes(o.value))
   const colorMode = useColorMode()
-
+  const { size, container: inputStyles, text } = useInputStyles(undefined, field.size, sizeProp)
+  const selectedOptionStyle = useMemo<ViewStyle>(() => {
+    return {
+      paddingHorizontal: inputStyles.paddingHorizontal,
+      paddingVertical: inputStyles.paddingVertical,
+    }
+  }, [inputStyles])
+  const RenderOption = useMemo(() => customRender ?? DefaultRenderOption, [customRender])
   return (
     <View style={[styles.container, style]}>
       {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
-      {value ? (
-        value.map((v: any) => (
-          <View
-            //  key={getOptionKey ? getOptionKey(v) : v}
-            style={styles.optionContainer}>
-            <RenderOption value={v} colorMode={colorMode} isSelected={true} />
-          </View>
-        ))
+      {value?.length ? (
+        <View style={styles.optionsContainer}>
+          {selectedOptions.map(o => (
+            <SelectedOptionContainer key={o.value} style={selectedOptionStyle}>
+              <RenderOption
+                option={o}
+                value={o.value}
+                colorMode={colorMode}
+                isSelected
+                size={size}
+              />
+            </SelectedOptionContainer>
+          ))}
+        </View>
       ) : (
-        <Text style={styles.emptyText}>None</Text>
+        <Text style={[styles.emptyText, text]}>None</Text>
       )}
     </View>
   )

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

@@ -1,8 +1,10 @@
-import { RenderSelectOptionProps } from '@chem-po/core'
+import { BaseSelectOption, InputSize, RenderSelectOptionProps } from '@chem-po/core'
 import { SelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
 import React from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
+import { useInputStyles } from '../input/hooks/useInputStyles'
+import { inputViewStyles } from './styles'
 
 const styles = StyleSheet.create({
   container: {
@@ -15,10 +17,13 @@ const styles = StyleSheet.create({
   },
 })
 
-const DefaultRenderOption = <T extends SelectField>({
-  value,
-}: RenderSelectOptionProps<T['defaultValue']>) => {
-  return <Txt>{typeof value === 'string' ? value : JSON.stringify(value)}</Txt>
+export const DefaultRenderOption = <
+  Value = string,
+  Option extends BaseSelectOption<Value> = BaseSelectOption<Value>,
+>({
+  option,
+}: RenderSelectOptionProps<Value, Option>) => {
+  return <Txt style={inputViewStyles.value}>{option.label}</Txt>
 }
 
 export const SelectFieldView = ({
@@ -26,24 +31,36 @@ export const SelectFieldView = ({
   value,
   noLabel,
   style,
+  size: sizeProp,
 }: {
   field: SelectField
   value: any
   noLabel?: boolean
   style?: ViewStyle
+  size?: InputSize
 }) => {
   const { placeholder, renderOption: customRender } = field
   const colorMode = useColorMode()
   const placeholderColor = usePlaceholderColor()
+  const { size, text } = useInputStyles(false, field.size, sizeProp)
+  const selectedOption = field.options.find(o => o.value === value)
   const RenderOption = customRender ?? DefaultRenderOption
   return (
     <View style={[styles.container, style]}>
-      {!noLabel && <Text style={[styles.label, { color: placeholderColor }]}>{placeholder}</Text>}
-      <RenderOption
-        value={value && value !== '' ? value : 'None'}
-        colorMode={colorMode}
-        isSelected={true}
-      />
+      {!noLabel && (
+        <Text style={[styles.label, text, { color: placeholderColor }]}>{placeholder}</Text>
+      )}
+      {selectedOption ? (
+        <RenderOption
+          value={selectedOption.value}
+          option={selectedOption}
+          colorMode={colorMode}
+          isSelected={true}
+          size={size}
+        />
+      ) : (
+        <Txt style={inputViewStyles.valueEmpty}>None</Txt>
+      )}
     </View>
   )
 }

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

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native'
+
+export const inputViewStyles = StyleSheet.create({
+  label: {
+    paddingRight: 8,
+    opacity: 0.7,
+    fontWeight: '600',
+  },
+  value: {
+    opacity: 1,
+  },
+  valueEmpty: {
+    opacity: 0.6,
+  },
+})

package/src/contexts/root.tsx

@@ -1,6 +1,7 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core'
 import { ChempoProps, ChempoProvider } from '@chem-po/react'
 import React, { PropsWithChildren, useMemo } from 'react'
+import { StyleSheet } from 'react-native'
 import { NotifierWrapper } from 'react-native-notifier'
 import { en, registerTranslation } from 'react-native-paper-dates'
 import { nativeToast } from '../constants/toast'
@@ -37,3 +38,9 @@ export const ChempoNativeProvider = ({
     </NotifierWrapper>
   )
 }
+
+const styles = StyleSheet.create({
+  notifier: {
+    flex: 1,
+  },
+})

package/lib/commonjs/components/form/input/hooks/useInputStyle.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useInputStyle = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-const inputPaddingY = {
-  xs: 4,
-  // 0.25rem * 16
-  sm: 6,
-  // 0.35rem * 16
-  md: 8,
-  // 0.5rem * 16
-  lg: 8,
-  // 0.5rem * 16
-  xl: 8 // 0.5rem * 16
-};
-const inputPaddingX = {
-  xs: 8,
-  // 0.5rem * 16
-  sm: 12,
-  // 0.75rem * 16
-  md: 12,
-  // 0.75rem * 16
-  lg: 12,
-  // 0.75rem * 16
-  xl: 12 // 0.75rem * 16
-};
-const fontSize = {
-  xs: 12,
-  // 0.75rem * 16
-  sm: 14,
-  // 0.875rem * 16
-  md: 16,
-  // 1rem * 16
-  lg: 18,
-  // 1.125rem * 16
-  xl: 20 // 1.25rem * 16
-};
-const useInputStyle = size => (0, _react.useMemo)(() => _reactNative.StyleSheet.create({
-  style: {
-    paddingVertical: inputPaddingY[size ?? 'md'],
-    paddingHorizontal: inputPaddingX[size ?? 'md'],
-    fontSize: fontSize[size ?? 'md']
-  }
-}), [size]);
-exports.useInputStyle = useInputStyle;
-//# sourceMappingURL=useInputStyle.js.map

package/lib/commonjs/components/form/input/hooks/useInputStyle.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_reactNative","inputPaddingY","xs","sm","md","lg","xl","inputPaddingX","fontSize","useInputStyle","size","useMemo","StyleSheet","create","style","paddingVertical","paddingHorizontal","exports"],"sourceRoot":"..\\..\\..\\..\\..\\..\\src","sources":["components/form/input/hooks/useInputStyle.ts"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,MAAME,aAAwC,GAAG;EAC/CC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC,CAAE;AACT,CAAC;AAED,MAAMC,aAAwC,GAAG;EAC/CL,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE,CAAE;AACV,CAAC;AAED,MAAME,QAAmC,GAAG;EAC1CN,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE,CAAE;AACV,CAAC;AAEM,MAAMG,aAAa,GAAIC,IAAgB,IAC5C,IAAAC,cAAO,EACL,MACEC,uBAAU,CAACC,MAAM,CAAC;EAChBC,KAAK,EAAE;IACLC,eAAe,EAAEd,aAAa,CAACS,IAAI,IAAI,IAAI,CAAC;IAC5CM,iBAAiB,EAAET,aAAa,CAACG,IAAI,IAAI,IAAI,CAAC;IAC9CF,QAAQ,EAAEA,QAAQ,CAACE,IAAI,IAAI,IAAI;EACjC;AACF,CAAC,CAAC,EACJ,CAACA,IAAI,CACP,CAAC;AAAAO,OAAA,CAAAR,aAAA,GAAAA,aAAA","ignoreList":[]}

package/lib/commonjs/components/form/input/styles.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.inputStyles = void 0;
-var _reactNative = require("react-native");
-const inputStyles = exports.inputStyles = _reactNative.StyleSheet.create({
-  input: {
-    width: '100%',
-    paddingHorizontal: 6,
-    fontSize: 16,
-    paddingVertical: 4,
-    outlineWidth: 0
-  }
-});
-//# sourceMappingURL=styles.js.map

package/lib/commonjs/components/form/input/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","inputStyles","exports","StyleSheet","create","input","width","paddingHorizontal","fontSize","paddingVertical","outlineWidth"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/form/input/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEO,MAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,uBAAU,CAACC,MAAM,CAAC;EAC3CC,KAAK,EAAE;IACLC,KAAK,EAAE,MAAM;IACbC,iBAAiB,EAAE,CAAC;IACpBC,QAAQ,EAAE,EAAE;IACZC,eAAe,EAAE,CAAC;IAClBC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/form/input/hooks/useInputStyle.js

@@ -1,43 +0,0 @@
-import { useMemo } from 'react';
-import { StyleSheet } from 'react-native';
-const inputPaddingY = {
-  xs: 4,
-  // 0.25rem * 16
-  sm: 6,
-  // 0.35rem * 16
-  md: 8,
-  // 0.5rem * 16
-  lg: 8,
-  // 0.5rem * 16
-  xl: 8 // 0.5rem * 16
-};
-const inputPaddingX = {
-  xs: 8,
-  // 0.5rem * 16
-  sm: 12,
-  // 0.75rem * 16
-  md: 12,
-  // 0.75rem * 16
-  lg: 12,
-  // 0.75rem * 16
-  xl: 12 // 0.75rem * 16
-};
-const fontSize = {
-  xs: 12,
-  // 0.75rem * 16
-  sm: 14,
-  // 0.875rem * 16
-  md: 16,
-  // 1rem * 16
-  lg: 18,
-  // 1.125rem * 16
-  xl: 20 // 1.25rem * 16
-};
-export const useInputStyle = size => useMemo(() => StyleSheet.create({
-  style: {
-    paddingVertical: inputPaddingY[size ?? 'md'],
-    paddingHorizontal: inputPaddingX[size ?? 'md'],
-    fontSize: fontSize[size ?? 'md']
-  }
-}), [size]);
-//# sourceMappingURL=useInputStyle.js.map

package/lib/module/components/form/input/hooks/useInputStyle.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useMemo","StyleSheet","inputPaddingY","xs","sm","md","lg","xl","inputPaddingX","fontSize","useInputStyle","size","create","style","paddingVertical","paddingHorizontal"],"sourceRoot":"..\\..\\..\\..\\..\\..\\src","sources":["components/form/input/hooks/useInputStyle.ts"],"mappings":"AACA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,UAAU,QAAQ,cAAc;AAEzC,MAAMC,aAAwC,GAAG;EAC/CC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,CAAC,CAAE;AACT,CAAC;AAED,MAAMC,aAAwC,GAAG;EAC/CL,EAAE,EAAE,CAAC;EAAE;EACPC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE,CAAE;AACV,CAAC;AAED,MAAME,QAAmC,GAAG;EAC1CN,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE;EAAE;EACRC,EAAE,EAAE,EAAE,CAAE;AACV,CAAC;AAED,OAAO,MAAMG,aAAa,GAAIC,IAAgB,IAC5CX,OAAO,CACL,MACEC,UAAU,CAACW,MAAM,CAAC;EAChBC,KAAK,EAAE;IACLC,eAAe,EAAEZ,aAAa,CAACS,IAAI,IAAI,IAAI,CAAC;IAC5CI,iBAAiB,EAAEP,aAAa,CAACG,IAAI,IAAI,IAAI,CAAC;IAC9CF,QAAQ,EAAEA,QAAQ,CAACE,IAAI,IAAI,IAAI;EACjC;AACF,CAAC,CAAC,EACJ,CAACA,IAAI,CACP,CAAC","ignoreList":[]}

package/lib/module/components/form/input/styles.js

@@ -1,11 +0,0 @@
-import { StyleSheet } from 'react-native';
-export const inputStyles = StyleSheet.create({
-  input: {
-    width: '100%',
-    paddingHorizontal: 6,
-    fontSize: 16,
-    paddingVertical: 4,
-    outlineWidth: 0
-  }
-});
-//# sourceMappingURL=styles.js.map

package/lib/module/components/form/input/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["StyleSheet","inputStyles","create","input","width","paddingHorizontal","fontSize","paddingVertical","outlineWidth"],"sourceRoot":"..\\..\\..\\..\\..\\src","sources":["components/form/input/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AAEzC,OAAO,MAAMC,WAAW,GAAGD,UAAU,CAACE,MAAM,CAAC;EAC3CC,KAAK,EAAE;IACLC,KAAK,EAAE,MAAM;IACbC,iBAAiB,EAAE,CAAC;IACpBC,QAAQ,EAAE,EAAE;IACZC,eAAe,EAAE,CAAC;IAClBC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/components/form/input/hooks/useInputStyle.d.ts

@@ -1,9 +0,0 @@
-import { InputSize } from '@chem-po/react';
-export declare const useInputStyle: (size?: InputSize) => {
-    style: {
-        paddingVertical: number;
-        paddingHorizontal: number;
-        fontSize: number;
-    };
-};
-//# sourceMappingURL=useInputStyle.d.ts.map

package/lib/typescript/components/form/input/hooks/useInputStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useInputStyle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/hooks/useInputStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AA4B1C,eAAO,MAAM,aAAa,GAAI,OAAO,SAAS;;;;;;CAW3C,CAAA"}

package/lib/typescript/components/form/input/styles.d.ts

@@ -1,10 +0,0 @@
-export declare const inputStyles: {
-    input: {
-        width: "100%";
-        paddingHorizontal: number;
-        fontSize: number;
-        paddingVertical: number;
-        outlineWidth: number;
-    };
-};
-//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/form/input/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;;;CAQtB,CAAA"}

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

@@ -1,40 +0,0 @@
-import { InputSize } from '@chem-po/react'
-import { useMemo } from 'react'
-import { StyleSheet } from 'react-native'
-
-const inputPaddingY: Record<InputSize, number> = {
-  xs: 4, // 0.25rem * 16
-  sm: 6, // 0.35rem * 16
-  md: 8, // 0.5rem * 16
-  lg: 8, // 0.5rem * 16
-  xl: 8, // 0.5rem * 16
-}
-
-const inputPaddingX: Record<InputSize, number> = {
-  xs: 8, // 0.5rem * 16
-  sm: 12, // 0.75rem * 16
-  md: 12, // 0.75rem * 16
-  lg: 12, // 0.75rem * 16
-  xl: 12, // 0.75rem * 16
-}
-
-const fontSize: Record<InputSize, number> = {
-  xs: 12, // 0.75rem * 16
-  sm: 14, // 0.875rem * 16
-  md: 16, // 1rem * 16
-  lg: 18, // 1.125rem * 16
-  xl: 20, // 1.25rem * 16
-}
-
-export const useInputStyle = (size?: InputSize) =>
-  useMemo(
-    () =>
-      StyleSheet.create({
-        style: {
-          paddingVertical: inputPaddingY[size ?? 'md'],
-          paddingHorizontal: inputPaddingX[size ?? 'md'],
-          fontSize: fontSize[size ?? 'md'],
-        },
-      }),
-    [size],
-  )

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

@@ -1,11 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-export const inputStyles = StyleSheet.create({
-  input: {
-    width: '100%',
-    paddingHorizontal: 6,
-    fontSize: 16,
-    paddingVertical: 4,
-    outlineWidth: 0,
-  },
-})