@codeleap/web 3.1.1 → 3.2.1

package/src/components/Drawer/index.tsx

@@ -1,8 +1,12 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
 import {
   AnyFunction,
   ComponentVariants,
   IconPlaceholder,
   onUpdate,
+  TypeGuards,
   useDefaultComponentStyle,
 } from '@codeleap/common'
 import { CSSObject } from '@emotion/react'
@@ -13,6 +17,7 @@ import { Text } from '../Text'
 import { Button } from '../Button'
 import { StylesOf } from '../../types/utility'
 import { DrawerComposition, DrawerPresets } from './styles'
+import { ActionIcon } from '../ActionIcon'
 
 const axisMap = {
   top: [-1, 'Y'],
@@ -54,7 +59,7 @@ const resolveHiddenDrawerPosition = (
   return [css, translateAxis, positioning]
 }
 
-export const Drawer: React.FC<DrawerProps> = ({ ...rawProps }) => {
+export const Drawer = ({ ...rawProps }:DrawerProps) => {
   const {
     open,
     toggle,
@@ -119,21 +124,24 @@ export const Drawer: React.FC<DrawerProps> = ({ ...rawProps }) => {
           ...variantStyles.box,
         }}
       >
-        <View
-          component='header'
-          variants={['justifySpaceBetween']}
-          css={variantStyles.header}
-        >
-          {typeof title === 'string' ? <Text text={title} /> : title}
-          {showCloseButton && (
-            <Button
-              onPress={toggle}
-              icon={'close' as IconPlaceholder}
-              variants={['icon']}
-              css={variantStyles.headerCloseButton}
-            />
-          )}
-        </View>
+        {
+          !TypeGuards.isNil(title) || showCloseButton && (
+            <View
+              component='header'
+              variants={['justifySpaceBetween']}
+              css={variantStyles.header}
+            >
+              {typeof title === 'string' ? <Text text={title} /> : title}
+              {showCloseButton && (
+                <ActionIcon
+                  onPress={toggle}
+                  icon={'close' as IconPlaceholder}
+                  css={variantStyles.headerCloseButton}
+                />
+              )}
+            </View>
+          )
+        }
         <View css={variantStyles.body}>{children}</View>
         {footer && (
           <View component='footer' css={variantStyles.footer}>
@@ -145,4 +153,4 @@ export const Drawer: React.FC<DrawerProps> = ({ ...rawProps }) => {
   )
 }
 
-export * from './styles'
+export * from './styles'

package/src/components/FileInput.tsx

@@ -1,51 +1,79 @@
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
 import React, {
-  ComponentPropsWithoutRef,
   useImperativeHandle,
   useRef,
 } from 'react'
 import { WebInputFile } from '@codeleap/common'
+import { HTMLProps } from '../types'
 
 export type FileInputRef = {
-  openFilePicker: () => void
+  openFilePicker: () => Promise<WebInputFile[]>
 }
 
-export type FileInputProps = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
-  onFileSelect(files: WebInputFile[]): void
+export type FileInputProps = Omit<HTMLProps<'input'>, 'type'|'ref'> & {
+  onFileSelect?: (files: WebInputFile[]) => void
 }
 
-export const FileInput = React.forwardRef<FileInputRef, FileInputProps>(
-  (inputProps, ref) => {
-    const inputRef = useRef<HTMLInputElement>(null)
+export const _FileInput = (inputProps: FileInputProps, ref:React.Ref<FileInputRef>) => {
+  const inputRef = useRef<HTMLInputElement>(null)
 
-    const { onFileSelect, ...props } = inputProps
+  const { onFileSelect, ...props } = inputProps
 
-    useImperativeHandle(ref, () => ({
-      openFilePicker: () => {
-        inputRef.current.click()
-      },
-    }))
+  const resolveWithFile = useRef<(file:WebInputFile[]) => any>()
+
+  useImperativeHandle(ref, () => ({
+    openFilePicker: () => {
+      inputRef.current.click()
+
+      return new Promise<WebInputFile[]>((resolve) => {
+        resolveWithFile.current = resolve
+      })
+    },
+  }))
 
-    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-      if (!e.target.files.length) return
-      inputProps.onChange && inputProps.onChange(e)
-      const fileArray = Array.from(e.target?.files || []) as File[]
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!e.target.files.length) return
+    inputProps.onChange && inputProps.onChange(e)
+    const fileArray = Array.from(e.target?.files || []) as File[]
 
-      const files: WebInputFile[] = fileArray.map((obj) => ({
-        file: obj,
-        preview: URL.createObjectURL(obj),
-      }))
+    const files: WebInputFile[] = fileArray.map((obj) => ({
+      file: obj,
+      preview: URL.createObjectURL(obj),
+    }))
+
+    onFileSelect && onFileSelect(files)
 
-      onFileSelect && onFileSelect(files)
+    if (resolveWithFile.current) {
+      resolveWithFile.current(files)
+      resolveWithFile.current = undefined
     }
+  }
 
-    return (
-      <input
-        type={'file'}
-        css={{ visibility: 'hidden', width: 0, height: 0, opacity: 0, display: 'none' }}
-        {...props}
-        ref={inputRef}
-        onChange={handleChange}
-      />
-    )
-  },
+  return (
+    <input
+      type={'file'}
+      css={{ visibility: 'hidden', width: 0, height: 0, opacity: 0, display: 'none' }}
+      {...props}
+      ref={inputRef}
+      onChange={handleChange}
+    />
+  )
+}
+
+export const FileInput = React.forwardRef<FileInputRef, FileInputProps>(_FileInput) as unknown as (
+  (props: FileInputProps & { ref?: React.MutableRefObject<FileInputRef> | React.Ref<FileInputRef> }) => JSX.Element
 )
+
+export const useFileInput = () => {
+  const inputRef = useRef<FileInputRef|null>(null)
+
+  const openFilePicker = () => {
+    return inputRef.current?.openFilePicker()
+  }
+
+  return {
+    openFilePicker,
+    ref: inputRef,
+  }
+}

package/src/components/Icon/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
 /** @jsx jsx */
 import { CSSObject, jsx } from '@emotion/react'
+import { CSSInterpolation } from '@emotion/css'
 import {
   ComponentVariants,
   IconPlaceholder,
@@ -8,8 +8,7 @@ import {
   useDefaultComponentStyle,
   useCodeleapContext,
 } from '@codeleap/common'
-import { View, ViewProps } from '../View'
-import { CSSInterpolation } from '@emotion/css'
+import { View } from '../View'
 
 export * from './styles'
 
@@ -17,11 +16,11 @@ export type IconProps = {
   name: IconPlaceholder
   style?: any
   renderEmptySpace?: boolean
-  css?: Array<React.CSSProperties>
   forceStyle?: CSSObject | CSSInterpolation | React.CSSProperties
+  css?: any
 } & ComponentVariants<typeof IconStyles>
 
-export const Icon: React.FC<IconProps> = ({ name, style, variants, renderEmptySpace, ...otherProps }) => {
+const IconCP = ({ name, style, variants, renderEmptySpace, ...otherProps }:IconProps) => {
   const { Theme, logger } = useCodeleapContext()
   const Component = Theme?.icons?.[name]
 
@@ -51,3 +50,5 @@ export const Icon: React.FC<IconProps> = ({ name, style, variants, renderEmptySp
   }
   return <Component css={variantStyles.icon} {...otherProps}/>
 }
+
+export const Icon = IconCP as ((props: IconProps) => jsx.JSX.Element)

package/src/components/InputBase/index.tsx

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
 import React from 'react'
 import { TypeGuards, getRenderedComponent } from '@codeleap/common'
 import { ActionIcon, ActionIconProps } from '../ActionIcon'
@@ -17,7 +19,7 @@ export const InputBaseDefaultOrder:InputBaseProps['order'] = [
   'error',
 ]
 const KeyPassthrough = (props: React.PropsWithChildren<any>) => {
-  return <>{props.children}</>
+  return <React.Fragment>{props.children}</React.Fragment>
 }
 
 export const InputBase = React.forwardRef<unknown, InputBaseProps>((props, ref) => {
@@ -38,6 +40,7 @@ export const InputBase = React.forwardRef<unknown, InputBaseProps>((props, ref)
     disabled = false,
     order = InputBaseDefaultOrder,
     style,
+    noError = false,
     labelAsRow = false,
     innerWrapperRef,
     ...otherProps
@@ -81,9 +84,11 @@ export const InputBase = React.forwardRef<unknown, InputBaseProps>((props, ref)
       {children}
       {_rightIcon}
     </InnerWrapperComponent>,
-    error: _error || <Text children={<>
-      &nbsp;
-    </>} css={_styles.errorStyle}/>,
+    error: noError ? null : (
+      _error || <Text children={<React.Fragment>
+        &nbsp;
+      </React.Fragment>} css={_styles.errorStyle}/>
+    ),
   }
 
   return (

package/src/components/InputBase/types.ts

@@ -24,5 +24,6 @@ export type InputBaseProps = React.PropsWithChildren<{
   order?: OrderedParts[]
   style?: any
   labelAsRow?: boolean
+  noError?: boolean
   innerWrapperRef?: React.MutableRefObject<HTMLDivElement | null>
 }>

package/src/components/List/index.tsx

@@ -1,3 +1,6 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+
 import { VariableSizeList as VirtualList , VariableSizeListProps} from 'react-window'
 import { ComponentProps, CSSProperties, ReactElement } from 'react'
 import AutoSizer from 'react-virtualized-auto-sizer'

package/src/components/LoadingOverlay/index.tsx

@@ -1,34 +1,47 @@
-import { ComponentVariants, useDefaultComponentStyle } from "@codeleap/common"
-import React from "react"
-import { StylesOf } from "../.."
-import { LoadingOverlayComposition, LoadingOverlayPresets } from "./styles"
-import {View} from '../View'
-import { ActivityIndicator } from "../ActivityIndicator"
+import { ComponentVariants, getNestedStylesByKey, useDefaultComponentStyle } from '@codeleap/common'
+import React from 'react'
+import { StylesOf } from '../..'
+import { LoadingOverlayComposition, LoadingOverlayPresets } from './styles'
+import { View, ViewProps } from '../View'
+import { ActivityIndicator, ActivityIndicatorProps } from '../ActivityIndicator'
 
-export type LoadingOverlayProps = React.PropsWithChildren<{
+export type LoadingOverlayProps = Partial<ViewProps<'div'>> & {
   visible?: boolean
   styles?: StylesOf<LoadingOverlayComposition>
-}> & ComponentVariants<typeof LoadingOverlayPresets>
-
+  style?: React.CSSProperties
+  indicatorProps?: ActivityIndicatorProps
+  children?: React.ReactNode
+} & ComponentVariants<typeof LoadingOverlayPresets>
 
 export const LoadingOverlay = (props: LoadingOverlayProps) => {
-  const { visible, children, styles, variants,responsiveVariants } = props
+  const { 
+    visible,
+    children,
+    styles = {},
+    variants = [],
+    responsiveVariants = {},
+    style = {},
+    indicatorProps, 
+    ...rest 
+  } = props
 
   const variantStyles = useDefaultComponentStyle<'u:LoadingOverlay', typeof LoadingOverlayPresets>('u:LoadingOverlay', {
-    variants, styles, responsiveVariants, rootElement: 'wrapper'
+    variants, 
+    styles, 
+    responsiveVariants, 
+    rootElement: 'wrapper',
   })
 
-  return <View css={[variantStyles.wrapper, visible && variantStyles["wrapper:visible"]]}>
-    <ActivityIndicator 
-       styles={{
-        wrapper: [variantStyles.indicatorWrapper, visible && variantStyles["indicatorWrapper:visible"]],
-        backCircle: [variantStyles.indicatorBackCircle, visible && variantStyles["indicatorBackCircle:visible"]],
-        frontCircle: [variantStyles.indicatorFrontCircle, visible && variantStyles["indicatorFrontCircle:visible"]],
-        circle: [variantStyles.indicatorCircle, visible && variantStyles["indicatorCircle:visible"]],
-      }}
-    />
-    {children}
-  </View>
+  const indicatorStyles = React.useMemo(() => {
+    return getNestedStylesByKey('indicator', variantStyles)
+  }, [variantStyles])
+
+  return (
+    <View css={[variantStyles.wrapper, visible && variantStyles['wrapper:visible'], style]} {...rest}>
+      <ActivityIndicator {...indicatorProps} styles={indicatorStyles} />
+      {children}
+    </View>
+  )
 }
 
-export * from './styles'
+export * from './styles'