@codeleap/mobile 1.9.25 → 1.9.28

package/src/components/Checkbox/styles.ts

@@ -1,76 +1,76 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
-
-type CheckboxParts =
-  | 'wrapper'
-  | 'label'
-  | 'labelWrapper'
-  | 'input'
-  | 'checkmark'
-  | 'checkmarkWrapper'
-  | 'error'
-
-export type MobileCheckboxComposition =
-  | CheckboxParts
-  | `${CheckboxParts}:checked`
-  | `${CheckboxParts}:disabled`
-  | `${CheckboxParts}:error`
-const createCheckboxStyle =
-  createDefaultVariantFactory<MobileCheckboxComposition>()
-
-const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })),
-)
-
-export const MobileCheckboxStyles = {
-  ...presets,
-  default: createCheckboxStyle((theme) => {
-    const size = theme.typography.baseFontSize * 1.2
-
-    const markHeight = size * 0.5
-    const markWidth = size * 0.25
-
-    const translateX = -(markWidth / 2)
-    const translateY = -(markHeight / 2)
-    return {
-      wrapper: {},
-      input: {
-        flexDirection: 'row',
-        ...theme.presets.alignCenter,
-        borderRadius: theme.borderRadius.small,
-      },
-      labelWrapper: {
-        flex: 1,
-      },
-      label: {
-        ...theme.spacing.marginLeft(0.5),
-      },
-
-      checkmark: {
-        position: 'absolute',
-        top: '40%',
-        left: '50%',
-
-        height: markHeight,
-        width: markWidth,
-        transform: [{ translateX }, { translateY }, { rotate: '45deg' }],
-      },
-      'checkmark:checked': {
-        ...theme.border.white({
-          width: 2,
-          directions: ['right', 'bottom'],
-        }),
-      },
-      checkmarkWrapper: {
-        position: 'relative',
-        width: size,
-        height: size,
-        ...theme.border.neutral(1),
-      },
-      'checkmarkWrapper:checked': {
-        backgroundColor: theme.colors.primary,
-      },
-      error: {
-        color: theme.colors.negative,
-      },
-    }
-  }),
-}
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+type CheckboxParts =
+  | 'wrapper'
+  | 'label'
+  | 'labelWrapper'
+  | 'input'
+  | 'checkmark'
+  | 'checkmarkWrapper'
+  | 'error'
+
+export type MobileCheckboxComposition =
+  | CheckboxParts
+  | `${CheckboxParts}:checked`
+  | `${CheckboxParts}:disabled`
+  | `${CheckboxParts}:error`
+const createCheckboxStyle =
+  createDefaultVariantFactory<MobileCheckboxComposition>()
+
+const presets = includePresets((styles) => createCheckboxStyle(() => ({ wrapper: styles })),
+)
+
+export const MobileCheckboxStyles = {
+  ...presets,
+  default: createCheckboxStyle((theme) => {
+    const size = theme.typography.baseFontSize * 1.2
+
+    const markHeight = size * 0.5
+    const markWidth = size * 0.25
+
+    const translateX = -(markWidth / 2)
+    const translateY = -(markHeight / 2)
+    return {
+      wrapper: {},
+      input: {
+        flexDirection: 'row',
+        ...theme.presets.alignCenter,
+        borderRadius: theme.borderRadius.small,
+      },
+      labelWrapper: {
+        flex: 1,
+      },
+      label: {
+        ...theme.spacing.marginLeft(0.5),
+      },
+
+      checkmark: {
+        position: 'absolute',
+        top: '40%',
+        left: '50%',
+
+        height: markHeight,
+        width: markWidth,
+        transform: [{ translateX }, { translateY }, { rotate: '45deg' }],
+      },
+      'checkmark:checked': {
+        ...theme.border.white({
+          width: 2,
+          directions: ['right', 'bottom'],
+        }),
+      },
+      checkmarkWrapper: {
+        position: 'relative',
+        width: size,
+        height: size,
+        ...theme.border.neutral(1),
+      },
+      'checkmarkWrapper:checked': {
+        backgroundColor: theme.colors.primary,
+      },
+      error: {
+        color: theme.colors.negative,
+      },
+    }
+  }),
+}

package/src/components/ContentView.tsx

@@ -1,58 +1,58 @@
-import React from 'react'
-import {
-  ComponentVariants,
-  ContentViewStyles,
-  useDefaultComponentStyle,
-  ViewComposition,
-} from '@codeleap/common'
-import { ViewProps, View } from './View'
-import { Text } from './Text'
-import { StylesOf } from '../types/utility'
-import { ActivityIndicator } from './ActivityIndicator'
-import { StyleSheet } from 'react-native'
-
-export type ContentViewProps = Omit<
-  ViewProps,
-  'variants' | 'responsiveVariants'
-> & {
-  placeholderMsg: string
-  loading?: boolean
-  styles?: StylesOf<ViewComposition>
-} & ComponentVariants<typeof ContentViewStyles>
-
-const WrapContent = ({ children, ...props }) => (
-  <View {...props}>{children}</View>
-)
-
-export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
-  const { children, placeholderMsg, loading, variants, styles, ...props } =
-    rawProps
-
-  const variantStyle = useDefaultComponentStyle('ContentView', {
-    variants,
-    transform: StyleSheet.flatten,
-    styles,
-  })
-
-  if (loading) {
-    return (
-      <WrapContent {...props} style={variantStyle.wrapper}>
-        <ActivityIndicator styles={{ wrapper: variantStyle.loader }} />
-      </WrapContent>
-    )
-  }
-  const hasChildren = Object.keys(children || {}).length > 0
-  if (hasChildren) {
-    return (
-      <WrapContent {...props} style={variantStyle.wrapper}>
-        {children}
-      </WrapContent>
-    )
-  }
-
-  return (
-    <WrapContent {...props} style={styles}>
-      <Text text={placeholderMsg} />
-    </WrapContent>
-  )
-}
+import React from 'react'
+import {
+  ComponentVariants,
+  ContentViewStyles,
+  useDefaultComponentStyle,
+  ViewComposition,
+} from '@codeleap/common'
+import { ViewProps, View } from './View'
+import { Text } from './Text'
+import { StylesOf } from '../types/utility'
+import { ActivityIndicator } from './ActivityIndicator'
+import { StyleSheet } from 'react-native'
+
+export type ContentViewProps = Omit<
+  ViewProps,
+  'variants' | 'responsiveVariants'
+> & {
+  placeholderMsg: string
+  loading?: boolean
+  styles?: StylesOf<ViewComposition>
+} & ComponentVariants<typeof ContentViewStyles>
+
+const WrapContent = ({ children, ...props }) => (
+  <View {...props}>{children}</View>
+)
+
+export const ContentView: React.FC<ContentViewProps> = (rawProps) => {
+  const { children, placeholderMsg, loading, variants, styles, ...props } =
+    rawProps
+
+  const variantStyle = useDefaultComponentStyle('ContentView', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  if (loading) {
+    return (
+      <WrapContent {...props} style={variantStyle.wrapper}>
+        <ActivityIndicator styles={{ wrapper: variantStyle.loader }} />
+      </WrapContent>
+    )
+  }
+  const hasChildren = Object.keys(children || {}).length > 0
+  if (hasChildren) {
+    return (
+      <WrapContent {...props} style={variantStyle.wrapper}>
+        {children}
+      </WrapContent>
+    )
+  }
+
+  return (
+    <WrapContent {...props} style={styles}>
+      <Text text={placeholderMsg} />
+    </WrapContent>
+  )
+}

package/src/components/EmptyPlaceholder.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react'
+import { Icon } from './Icon'
+import { View } from './View'
+import { Text } from './Text'
+import { ActivityIndicator } from './ActivityIndicator'
+import {
+  ComponentVariants,
+  EmptyPlaceholderComposition,
+  EmptyPlaceholderStyles,
+  getNestedStylesByKey,
+  IconPlaceholder,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../types/utility'
+
+export type EmptyPlaceholderProps = {
+  itemName?: string
+  title?: string
+  loading?: boolean
+  styles?: StylesOf<EmptyPlaceholderComposition>
+  variants?: ComponentVariants<typeof EmptyPlaceholderStyles>['variants']
+  emptyIconName?: IconPlaceholder
+}
+
+export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPlaceholderProps) => {
+  const { itemName, title, loading, styles = {}, variants = [], emptyIconName = 'search' } = props
+  const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
+
+  const componentStyles = useDefaultComponentStyle('EmptyPlaceholder', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  const activityIndicatorStyles = useMemo(() => getNestedStylesByKey('loader', componentStyles)
+    , [componentStyles])
+
+  if (loading) {
+    return (
+      <View style={[componentStyles.wrapper, componentStyles['wrapper:loading']]} >
+        <ActivityIndicator styles={activityIndicatorStyles}/>
+      </View>
+    )
+  }
+
+  return (
+    <View style={componentStyles.wrapper}>
+      <Icon name={emptyIconName as IconPlaceholder} style={componentStyles.icon}/>
+      <Text text={emptyText} style={componentStyles.text}/>
+    </View>
+  )
+}