anna native first version

AnnaSearl · Jun 18, 2021 · 57a7775 · 57a7775
1 parent c01c321
commit 57a7775
Show file tree

Hide file tree

Showing 140 changed files with 5,517 additions and 1,429 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ esm/
 dist/
 package-lock.json
 yarn.lock
-yarn-error.log
+yarn-error.log
+.umi
diff --git a/.umirc.ts b/.umirc.ts
@@ -0,0 +1,93 @@
+import { defineConfig } from 'dumi';
+import path from 'path';
+
+process.env.BABEL_ENV = 'dumi';
+
+export default defineConfig({
+  publicPath: '/anna-native/',
+  base: '/anna-native',
+  title: 'Anna Native',
+  mode: 'site',
+  logo: 'https://smebimage.fuliaoyi.com/Fpnmnf0ZwkicXQEXlrLZXBLY4hA9',
+  favicon: 'https://smebimage.fuliaoyi.com/Fpnmnf0ZwkicXQEXlrLZXBLY4hA9',
+  navs: [
+    null,
+    { title: 'Eurus', path: 'https://github.com/AnnaSearl/eurus' },
+    { title: 'GitHub', path: 'https://github.com/AnnaSearl/anna-native' },
+  ],
+  theme: {
+    '@c-primary': '#9966FF',
+  },
+  exportStatic: {},
+  outputPath: 'site',
+  sass: {
+    implementation: require('node-sass'),
+  },
+  extraPostCSSPlugins: [],
+  extraBabelPlugins: [],
+  alias: {
+    'anna-native': path.resolve(__dirname, 'components'),
+  },
+  chainWebpack(memo, { env, webpack, createCSSRule }) {
+    // jsx 内联样式 px2rem
+  },
+  styles: [
+    `
+    .__dumi-default-device > iframe {
+      background-color: #F4F4F4;
+    }
+    .__dumi-default-mobile-demo-layout {
+      font-size: 14px;
+    }
+    .__dumi-default-mobile-demo-layout > div > div {
+      margin-bottom: 10px;
+    }
+    .icon.icon-link { 
+      display: none;
+    }
+    .__dumi-default-navbar-logo{
+      font-size: 20px !important;
+      padding-left: 52px !important;
+    }
+    .__dumi-default-menu[data-mode='site'] .__dumi-default-menu-list > li > a.active{
+      background: rgba(153, 102, 255, 0.1) !important;
+    }
+    .markdown *:not(pre) code {
+      margin: 0 1px;
+      padding: .2em .4em !important;
+      font-size: .9em;
+      color: rgba(0, 0, 0, 0.85) !important;
+      background: #f2f4f5 !important;
+      border: 1px solid #f0f0f0;
+      border-radius: 3px;
+      font-family: sfmono-regular,Consolas,liberation mono,Menlo,Courier,monospace;
+    }
+    .markdown table td:nth-child(3) {
+      color: #9966FF;
+      font-size: 13px;
+      word-break: break-all;
+    }
+    .markdown table td:nth-child(3) > code {
+      color: #9966FF !important;
+      background-color: #F6F6F6 !important;
+      font-size: 13px;
+      word-break: break-all;
+      margin-bottom: 6px;
+    }
+    .anna-btn:not(.anna-btn-disabled):hover .anna-btn-mask {	
+      box-sizing: border-box;	
+      position: absolute;	
+      top: -1PX;	
+      right: -1PX;	
+      bottom: -1PX;	
+      left: -1PX;	
+      content: '';	
+      background-color: rgba(255, 255, 255, 0.35);	
+      border-radius: inherit;	
+      pointer-events: none;	
+      transition: background-color 0.3s;
+    }
+
+    `,
+  ],
+});
diff --git a/components/_constants/index.ts b/components/_constants/index.ts
@@ -0,0 +1,22 @@
+// 顶部z状态栏高度，针对非刘海屏的机型
+export const STATUS_BAR_HEIGHT = 20;
+
+// 顶部安全区域高度
+export const TOP_SAFE_HEIGHT = 44;
+
+// 底部安全区域高度
+export const BOTTOM_SAFE_HEIGHT = 34;
+
+// 导航栏在iOS中的高度
+export const NAV_BAR_HEIGHT_IOS = 44;
+
+// 导航栏在Android中的高度
+export const NAV_BAR_HEIGHT_ANDROID = 50;
+
+// iPhone 12
+export const IPHONE12_NORMAL = 844;
+export const IPHONE12_MAX = 926;
+export const IPHONE12_MINI = 780;
+
+// img URL
+export const IMAGE_HOST = 'https://fly-resource.oss-cn-shanghai.aliyuncs.com/fym-app/';
diff --git a/components/_util/index.ts b/components/_util/index.ts
@@ -1,8 +1,12 @@
+// @ts-ignore
+import { DeviceInfo, Dimensions } from 'react-native';
+import { IPHONE12_NORMAL, IPHONE12_MAX, IPHONE12_MINI } from '../_constants';
+
 export const twoDimensional = (
   data: any[],
   columns: number,
   span?: number | number[],
-  standard = 24
+  standard = 24,
 ): [any[], any[]] => {
   const two: any[] = [];
   const spanTwo: any[] = [];
@@ -13,7 +17,7 @@ export const twoDimensional = (
   let spanArray = [];
   if (span) {
     spanArray = new Array(data.length).fill(colSpan);
-    if (typeof span === "number") {
+    if (typeof span === 'number') {
       if (span > 0) {
         spanArray[0] = span;
       }
@@ -75,6 +79,14 @@ export const flat = (arr: any[]): any[] => {
   }, []);
 };
 
+export const isIPhoneX = () => {
+  const height = Dimensions.get('window').height;
+  if (height === IPHONE12_NORMAL || height === IPHONE12_MAX || height === IPHONE12_MINI) {
+    return true;
+  }
+  return DeviceInfo.isIPhoneX_deprecated;
+};
+
 export const deepClone = function (data: any): any {
   let cloneData: any = null;
   if (Array.isArray(data)) {
@@ -83,9 +95,9 @@ export const deepClone = function (data: any): any {
       const item = data[i];
       cloneData[i] = deepClone(item);
     }
-  } else if (typeof data === "object" && data !== null) {
+  } else if (typeof data === 'object' && data !== null) {
     cloneData = {};
-    Object.keys(data).forEach((key) => {
+    Object.keys(data).forEach(key => {
       const item = data[key];
       cloneData[key] = deepClone(item);
     });

diff --git a/components/action-sheet/index.tsx b/components/action-sheet/index.tsx
@@ -1,13 +1,13 @@
-import React from "react";
-import { View, Pressable } from "react-native";
-import Popup from "../popup";
-import Icon from "../icon";
-import Node from "../node";
-import SafeFilling from "../safe-filling";
-import { $light1 } from "../style/theme";
-import styles from "./style";
+import React from 'react';
+import { View, Pressable, ViewStyle } from 'react-native';
+import Popup from '../popup';
+import Icon from '../icon';
+import Node from '../node';
+import SafeFilling from '../safe-filling';
+import { $light1 } from '../style/theme';
+import styles from './style';
 
-const prefixCls = "action-sheet";
+const prefixCls = 'action-sheet';
 
 export interface ActionSheetActionGridProps {
   value?: string | number;
@@ -24,9 +24,7 @@ export interface ActionSheetActionDefaultProps {
   disabled?: boolean;
 }
 
-export type ActionSheetAction =
-  | ActionSheetActionDefaultProps
-  | ActionSheetActionGridProps;
+export type ActionSheetAction = ActionSheetActionDefaultProps | ActionSheetActionGridProps;
 
 export interface ActionSheetProps {
   open?: boolean;
@@ -36,20 +34,18 @@ export interface ActionSheetProps {
   cover?: boolean;
   children?: React.ReactNode;
   maskClosable?: boolean;
+  itemStyle?: ViewStyle;
+  itemTextStyle?: ViewStyle;
   onCancel?: (e?: any) => void;
-  onChange?: (
-    a: ActionSheetAction,
-    g?: ActionSheetActionDefaultProps,
-    e?: any
-  ) => void;
+  onChange?: (a: ActionSheetAction, g?: ActionSheetActionDefaultProps, e?: any) => void;
 }
 
-const ActionSheet: React.FC<ActionSheetProps> = (props) => {
+const ActionSheet: React.FC<ActionSheetProps> = props => {
   const {
     open,
     title,
     actions,
-    cancelText = "Cancel",
+    cancelText = 'Cancel',
     cover,
     maskClosable = true,
     onCancel,
@@ -63,7 +59,7 @@ const ActionSheet: React.FC<ActionSheetProps> = (props) => {
   const handleChange = (
     action: ActionSheetAction,
     grid?: ActionSheetActionDefaultProps,
-    e?: any
+    e?: any,
   ) => {
     onChange?.(action, grid, e);
   };
@@ -72,29 +68,24 @@ const ActionSheet: React.FC<ActionSheetProps> = (props) => {
     maskClosable && onCancel?.();
   };
 
-  const renderAction = (
-    action: ActionSheetActionDefaultProps,
-    isLast: boolean
-  ) => (
-    <Pressable
-      key={action.value}
-      onPress={(e) => handleChange(action, undefined, e)}
-    >
+  const renderAction = (action: ActionSheetActionDefaultProps, isLast: boolean) => (
+    <Pressable key={action?.value} onPress={e => handleChange(action, undefined, e)}>
+      {/* Why you have the padding-bottom?? */}
       <View
         style={[
           styles[`${prefixCls}-action`],
           isLast ? { borderBottomWidth: 0 } : null,
+          props.itemStyle,
         ]}
       >
         <Node
           style={[
             styles[`${prefixCls}-action-text`],
-            action.type === "destructive"
-              ? styles[`${prefixCls}-action-destructive`]
-              : null,
+            action?.type === 'destructive' ? styles[`${prefixCls}-action-destructive`] : null,
+            props.itemTextStyle,
           ]}
         >
-          {action.text}
+          {action?.text}
         </Node>
       </View>
     </Pressable>
@@ -105,67 +96,50 @@ const ActionSheet: React.FC<ActionSheetProps> = (props) => {
       key={action.value}
       style={[
         styles[`${prefixCls}-grid`],
-        action.type === "destructive"
-          ? styles[`${prefixCls}-action-destructive`]
-          : null,
+        action.type === 'destructive' ? styles[`${prefixCls}-action-destructive`] : null,
       ]}
     >
       <View style={styles[`${prefixCls}-grid-wrapper`]}>
-        {(action.text as ActionSheetActionGridProps[])?.map(
-          (item: ActionSheetActionGridProps) => (
-            <Pressable
-              key={item.value}
-              style={styles[`${prefixCls}-grid-item`]}
-              onPress={(e) => handleChange(item, action, e)}
-            >
-              <Node style={styles[`${prefixCls}-grid-item-icon`]}>
-                {item.icon ? (
-                  <Icon name={item.icon} size={24} color="rgba(0, 0, 0, 0.8)" />
-                ) : (
-                  item.name
-                )}
-              </Node>
-              <Node style={styles[`${prefixCls}-grid-item-name`]}>
-                {item.name}
-              </Node>
-            </Pressable>
-          )
-        )}
+        {(action.text as ActionSheetActionGridProps[])?.map((item: ActionSheetActionGridProps) => (
+          <Pressable
+            key={item.value}
+            style={styles[`${prefixCls}-grid-item`]}
+            onPress={e => handleChange(item, action, e)}
+          >
+            <Node style={styles[`${prefixCls}-grid-item-icon`]}>
+              {item.icon ? (
+                <Icon name={item.icon} size={24} color="rgba(0, 0, 0, 0.8)" />
+              ) : (
+                item.name
+              )}
+            </Node>
+            <Node style={styles[`${prefixCls}-grid-item-name`]} numberOfLines={1}>
+              {item.name}
+            </Node>
+          </Pressable>
+        ))}
       </View>
     </View>
   );
 
   return (
     <View style={styles[prefixCls]}>
-      <Popup
-        transparent
-        position="bottom"
-        open={open}
-        onClose={handleCloseMask}
-      >
+      <Popup transparent position="bottom" open={open} onClose={handleCloseMask}>
         <View
-          style={[
-            styles[`${prefixCls}-container`],
-            cover ? styles[`${prefixCls}-cover`] : null,
-          ]}
+          style={[styles[`${prefixCls}-container`], cover ? styles[`${prefixCls}-cover`] : null]}
         >
           <View style={styles[`${prefixCls}-menu`]}>
             {title ? (
               <View style={styles[`${prefixCls}-action`]}>
-                <Node
-                  style={[
-                    styles[`${prefixCls}-action-text`],
-                    styles[`${prefixCls}-title`],
-                  ]}
-                >
+                <Node style={[styles[`${prefixCls}-action-text`], styles[`${prefixCls}-title`]]}>
                   {title}
                 </Node>
               </View>
             ) : null}
             {actions?.map((action, index) =>
-              action.mode === "grid"
+              action.mode === 'grid'
                 ? renderGrid(action)
-                : renderAction(action, index === actions.length - 1)
+                : renderAction(action, index === actions.length - 1),
             )}
           </View>
           <Pressable onPress={handleCancel}>