feat(api-updates): improved interfaces of both cupertino and material component

Author: XantreDev

cupertino-activity-indicator/package.json

@@ -0,0 +1,6 @@
+{
+  "react-native": "../src/cupertino-activity-indicator/index",
+  "main": "../lib/commonjs/cupertino-activity-indicator/index",
+  "module": "../lib/module/cupertino-activity-indicator/index",
+  "types": "../lib/typescript/src/cupertino-activity-indicator/index.d.ts"
+}

example/src/App.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
 
 import { StyleSheet, Text, View } from 'react-native';
-import {
-  DeterminateMaterialCircularProgressIndicator,
-  IndeterminateMaterialCircularProgressIndicator,
-} from 'react-native-skia-ui/material-circular-progress-indicator';
+import { MaterialCircularProgressIndicator } from 'react-native-skia-ui/material-circular-progress-indicator';
 import { useSharedValue, withTiming } from 'react-native-reanimated';
 import { CupertinoActivityIndicator } from 'react-native-skia-ui/cupertino-activity-indicator';
 export default function App() {
@@ -18,33 +15,33 @@ export default function App() {
   });
   return (
     <View style={styles.container}>
-      <Text>DeterminateMaterialCircularProgressIndicator</Text>
-      <DeterminateMaterialCircularProgressIndicator
+      <Text>Determinate progress indicators</Text>
+      <MaterialCircularProgressIndicator.Determinate
         size={56}
         valueColor="green"
         strokeWidth={5}
         strokeCap="round"
         value={progress}
       />
-      <DeterminateMaterialCircularProgressIndicator
+      <MaterialCircularProgressIndicator.Determinate
         size={100}
         valueColor="blue"
         strokeWidth={4}
         strokeCap="round"
         value={progress}
       />
-      <CupertinoActivityIndicator
+      <CupertinoActivityIndicator.PartiallyRevealed
         color="black"
         progress={progress}
         radius={50}
       />
-      <Text>IndeterminateMaterialCircularProgressIndicator</Text>
-      <IndeterminateMaterialCircularProgressIndicator
+
+      <Text>Indeterminate progress indicators</Text>
+      <MaterialCircularProgressIndicator.Indeterminate
         size={40}
         valueColor="black"
       />
-
-      <IndeterminateMaterialCircularProgressIndicator
+      <MaterialCircularProgressIndicator.Indeterminate
         size={100}
         valueColor="red"
         backgroundColor={'#f0f0f0'}

src/cupertino-activity-indicator/index.tsx

@@ -108,7 +108,7 @@ type InternalProps = {
 };
 
 export type CupertinoActivityIndicatorProps = {
-  color: string;
+  color: PlainValueOrAnimatedValue<string>;
   /**
    * Whether to show the indicator (true, the default) or hide it (false).
    * @default true
@@ -120,17 +120,21 @@ export type CupertinoActivityIndicatorProps = {
    * Defaults to 10 pixels.
    */
   radius?: PlainValueOrAnimatedValue<number>;
-  /**
-   * Determines the percentage of spinner ticks that will be shown. Typical usage would
-   * display all ticks, however, this allows for more fine-grained control such as
-   * during pull-to-refresh when the drag-down action shows one tick at a time as
-   * the user continues to drag down.
-   *
-   * Defaults to one. Must be between zero and one, inclusive.
-   */
-  progress?: PlainValueOrAnimatedValue<number>;
 };
 
+export type CupertinoActivityIndicatorPartiallyRevealedProps =
+  CupertinoActivityIndicatorProps & {
+    /**
+     * Determines the percentage of spinner ticks that will be shown. Typical usage would
+     * display all ticks, however, this allows for more fine-grained control such as
+     * during pull-to-refresh when the drag-down action shows one tick at a time as
+     * the user continues to drag down.
+     *
+     * Must be between zero and one, inclusive.
+     */
+    progress: PlainValueOrAnimatedValue<number>;
+  };
+
 const _Content = (props: InternalProps) => {
   const animationValue = useDuration({
     stopped: useSharedValue(false),
@@ -167,16 +171,35 @@ const _Content = (props: InternalProps) => {
   );
 };
 
-export const CupertinoActivityIndicator = (
+const CupertinoActivityIndicator_ = (
   props: CupertinoActivityIndicatorProps
+) => {
+  const { color, animating, radius } = props;
+
+  return _Content({
+    color: useToSharedValue(color),
+    animating: useToSharedValueOptional(animating, true),
+    radius: useToSharedValueOptional(radius, _kDefaultIndicatorRadius),
+    progress: useToSharedValue(1),
+  });
+};
+
+const CupertinoActivityIndicatorPartial = (
+  props: CupertinoActivityIndicatorPartiallyRevealedProps
 ) => {
   const { color, animating, radius, progress } = props;
-  return (
-    <_Content
-      color={useToSharedValue(color)}
-      animating={useToSharedValueOptional(animating, true)}
-      radius={useToSharedValueOptional(radius, _kDefaultIndicatorRadius)}
-      progress={useToSharedValueOptional(progress, 1)}
-    />
-  );
+
+  return _Content({
+    color: useToSharedValue(color),
+    animating: useToSharedValueOptional(animating, true),
+    radius: useToSharedValueOptional(radius, _kDefaultIndicatorRadius),
+    progress: useToSharedValue(progress),
+  });
 };
+
+export const CupertinoActivityIndicator = Object.assign(
+  CupertinoActivityIndicator_,
+  {
+    PartiallyRevealed: CupertinoActivityIndicatorPartial,
+  }
+);

src/material-circular-progress-indicator/MaterialCircularProgressIndicator.tsx

@@ -124,7 +124,7 @@ type InternalProps = {
   strokeAlign?: number;
 };
 
-const Content_ = ({
+const _Content = ({
   size: _size,
   strokeWidth,
   value,
@@ -209,11 +209,6 @@ export type MaterialCircularProgressIndicatorProps = SetOptional<
   InternalOrSharedProps,
   DefaultedKeys | 'stopped' | 'value'
 >;
-/*
-type SetRequiredAndNonNullable<T, K extends keyof T> = SetRequired<
-  SetNonNullable<T, K>,
-  K
->; */
 
 export type DeterminateMaterialCircularProgressIndicatorProps = SetOptional<
   SetNonNullable<Omit<InternalOrSharedProps, 'stopped'>, 'value'>,
@@ -225,17 +220,10 @@ export type IndeterminateMaterialCircularProgressIndicatorProps = SetOptional<
   DefaultedKeys | 'stopped'
 >;
 
-/**
- *
- * @description Component has two modes: determinate and indeterminate. Which are controlled by the `value` prop.
- * If `value` is undefined, the progress indicator will be indeterminate.
- * If `value` is a number between 0 and 1, the progress indicator will be determinate.
- * Not all props applies to both modes. For more type safety, use `DeterminateMaterialCircularProgressIndicator` and `IndeterminateMaterialCircularProgressIndicator` instead.
- */
-export const MaterialCircularProgressIndicator = (
+const MaterialCircularProgressIndicator_ = (
   props: MaterialCircularProgressIndicatorProps
 ) => (
-  <Content_
+  <_Content
     {...props}
     size={useToSharedValue(props.size)}
     value={useToSharedValue(props.value)}
@@ -246,10 +234,10 @@ export const MaterialCircularProgressIndicator = (
   />
 );
 
-export const IndeterminateMaterialCircularProgressIndicator = (
+const IndeterminateMaterialCircularProgressIndicator = (
   props: IndeterminateMaterialCircularProgressIndicatorProps
 ) => (
-  <Content_
+  <_Content
     {...props}
     size={useToSharedValue(props.size)}
     value={useSharedValue(undefined)}
@@ -260,10 +248,10 @@ export const IndeterminateMaterialCircularProgressIndicator = (
   />
 );
 
-export const DeterminateMaterialCircularProgressIndicator = (
+const DeterminateMaterialCircularProgressIndicator = (
   props: DeterminateMaterialCircularProgressIndicatorProps
 ) => (
-  <Content_
+  <_Content
     {...props}
     size={useToSharedValue(props.size)}
     value={useToSharedValue(props.value)}
@@ -273,3 +261,31 @@ export const DeterminateMaterialCircularProgressIndicator = (
     valueColor={useToSharedValue(props.valueColor)}
   />
 );
+
+/**
+ *
+ * @description Component has two modes: determinate and indeterminate. Which are controlled by the `value` prop.
+ * If `value` is undefined, the progress indicator will be indeterminate.
+ * If `value` is a number between 0 and 1, the progress indicator will be determinate.
+ *
+ *
+ * Not all props applies to both modes. For more type safety, use `MaterialCircularProgressIndicator.Determinate` and `MaterialCircularProgressIndicator.Indeterminate` components.
+ */
+export const MaterialCircularProgressIndicator = Object.assign(
+  MaterialCircularProgressIndicator_,
+  {
+    Indeterminate: IndeterminateMaterialCircularProgressIndicator,
+    Determinate: DeterminateMaterialCircularProgressIndicator,
+  }
+);
+
+export {
+  /**
+   * @deprecated use `MaterialCircularProgressIndicator.Indeterminate` instead
+   */
+  IndeterminateMaterialCircularProgressIndicator,
+  /**
+   * @deprecated use `MaterialCircularProgressIndicator.Determinate` instead
+   */
+  DeterminateMaterialCircularProgressIndicator,
+};