add adapt

apps/documentation/src/app/(doc)/ui/(components)/(display)/Adapt/page.tsx

@@ -9,7 +9,7 @@
 
 import { useTranslation } from 'react-i18next';
 import { TemplatePrimitive } from '../../templatePrimitive';
-import { Adapt, Text } from '@crossed/ui';
+import { Responsive, Text } from '@crossed/ui';
 
 export default function CreateBadge() {
   const { t } = useTranslation();
@@ -21,8 +21,8 @@ export default function CreateBadge() {
       return={[]}
       types={[]}
       anatomy={`// coming soon`}
-      example={`<Adapt fallback={<Text>sm</Text>}><Text>md</Text></Adapt>`}
-      scope={{ Adapt, Text }}
+      example={`<Responsive fallback={<Text>sm</Text>}><Text>md</Text></Responsive>`}
+      scope={{ Responsive, Text }}
     />
   );
 }

packages/ui/src/forms/Select/ContentImpl.tsx

@@ -11,7 +11,7 @@ import { SelectProvider, useSelectProvider } from './context';
 import { Portal } from '@gorhom/portal';
 import { Focus } from './Focus';
 import { useCallback } from 'react';
-import { Adapt } from '../../other/Adapt';
+import { Responsive } from '../../other/Adapt';
 
 export const ContentImpl = (props) => {
   const all = useSelectProvider();
@@ -30,9 +30,9 @@ export const ContentImpl = (props) => {
           onActivation={() => onFocus?.({} as any)}
           onDeactivation={() => onBlur?.({} as any)}
         >
-          <Adapt fallback={<ContentNative {...props} />}>
+          <Responsive media="md" fallback={<ContentNative {...props} />}>
             <ContentWeb {...props} />
-          </Adapt>
+          </Responsive>
         </Focus>
       </SelectProvider>
     </Portal>

packages/ui/src/other/Adapt.tsx

@@ -5,21 +5,37 @@
  * LICENSE file in the root of this projects source tree.
  */
 
-import { useMemo, type PropsWithChildren, type ReactNode } from 'react';
+import { memo, useMemo, type PropsWithChildren, type ReactNode } from 'react';
 import { useMedia } from '../useMedia';
+import { Platform, PlatformOSType } from 'react-native';
 
-export type AdaptProps = PropsWithChildren<{
+export const createSelect = (name: PlatformOSType) =>
+  memo(({ children }: PropsWithChildren) => {
+    return Platform.select({
+      [name]: children,
+    });
+  });
+
+export const Native = createSelect('native');
+export const Web = createSelect('web');
+export const IOs = createSelect('ios');
+export const Android = createSelect('android');
+export const MacOS = createSelect('macos');
+export const Windows = createSelect('windows');
+
+export type ResponsiveProps = PropsWithChildren<{
   fallback?: ReactNode;
-  size?: keyof ReturnType<typeof useMedia>;
+  media: keyof ReturnType<typeof useMedia>;
 }>;
-export const Adapt = ({
-  children,
-  size = 'md',
-  fallback = null,
-}: AdaptProps) => {
-  const media = useMedia();
-  const isShow = useMemo(() => {
-    return media[size];
-  }, [size, media]);
-  return isShow ? children : fallback;
-};
+export const Responsive = memo(
+  ({ media, children, fallback }: ResponsiveProps) => {
+    const allMedia = useMedia();
+    const isShow = useMemo(() => {
+      return allMedia[media];
+    }, [media, allMedia]);
+    return useMemo(
+      () => (isShow ? children : fallback),
+      [isShow, children, fallback]
+    );
+  }
+);