12:14

AnnaSearl · Dec 14, 2020 · c01c321 · c01c321
1 parent 7748153
commit c01c321
Show file tree

Hide file tree

Showing 85 changed files with 2,219 additions and 1,153 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1 +1,8 @@
-{}
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "proseWrap": "never",
+  "arrowParens": "avoid",
+  "semi": true
+}
diff --git a/components/_util/index.ts b/components/_util/index.ts
@@ -2,7 +2,7 @@ export const twoDimensional = (
   data: any[],
   columns: number,
   span?: number | number[],
-  standard = 24,
+  standard = 24
 ): [any[], any[]] => {
   const two: any[] = [];
   const spanTwo: any[] = [];
@@ -13,7 +13,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;
       }
@@ -74,3 +74,23 @@ export const flat = (arr: any[]): any[] => {
     return prev.concat(curr);
   }, []);
 };
+
+export const deepClone = function (data: any): any {
+  let cloneData: any = null;
+  if (Array.isArray(data)) {
+    cloneData = [];
+    for (let i = 0; i < data.length; i += 1) {
+      const item = data[i];
+      cloneData[i] = deepClone(item);
+    }
+  } else if (typeof data === "object" && data !== null) {
+    cloneData = {};
+    Object.keys(data).forEach((key) => {
+      const item = data[key];
+      cloneData[key] = deepClone(item);
+    });
+  } else {
+    cloneData = data;
+  }
+  return cloneData;
+};
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 '@styles/theme';
-import styles from './style';
+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";
 
-const prefixCls = 'action-sheet';
+const prefixCls = "action-sheet";
 
 export interface ActionSheetActionGridProps {
   value?: string | number;
@@ -24,7 +24,9 @@ export interface ActionSheetActionDefaultProps {
   disabled?: boolean;
 }
 
-export type ActionSheetAction = ActionSheetActionDefaultProps | ActionSheetActionGridProps;
+export type ActionSheetAction =
+  | ActionSheetActionDefaultProps
+  | ActionSheetActionGridProps;
 
 export interface ActionSheetProps {
   open?: boolean;
@@ -35,15 +37,19 @@ export interface ActionSheetProps {
   children?: React.ReactNode;
   maskClosable?: boolean;
   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,
@@ -57,7 +63,7 @@ const ActionSheet: React.FC<ActionSheetProps> = props => {
   const handleChange = (
     action: ActionSheetAction,
     grid?: ActionSheetActionDefaultProps,
-    e?: any,
+    e?: any
   ) => {
     onChange?.(action, grid, e);
   };
@@ -66,13 +72,26 @@ const ActionSheet: React.FC<ActionSheetProps> = props => {
     maskClosable && onCancel?.();
   };
 
-  const renderAction = (action: ActionSheetActionDefaultProps, isLast: boolean) => (
-    <Pressable key={action.value} onPress={e => handleChange(action, undefined, e)}>
-      <View style={[styles[`${prefixCls}-action`], isLast ? { borderBottomWidth: 0 } : null]}>
+  const renderAction = (
+    action: ActionSheetActionDefaultProps,
+    isLast: boolean
+  ) => (
+    <Pressable
+      key={action.value}
+      onPress={(e) => handleChange(action, undefined, e)}
+    >
+      <View
+        style={[
+          styles[`${prefixCls}-action`],
+          isLast ? { borderBottomWidth: 0 } : null,
+        ]}
+      >
         <Node
           style={[
             styles[`${prefixCls}-action-text`],
-            action.type === 'destructive' ? styles[`${prefixCls}-action-destructive`] : null,
+            action.type === "destructive"
+              ? styles[`${prefixCls}-action-destructive`]
+              : null,
           ]}
         >
           {action.text}
@@ -86,48 +105,67 @@ 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`]}>
+                {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}>

diff --git a/components/action-sheet/style/index.ts b/components/action-sheet/style/index.ts
@@ -1,81 +1,81 @@
-import { StyleSheet } from 'react-native';
-import { $light4, $light5, $light1, $dangerColor } from '@styles/theme';
+import { StyleSheet } from "react-native";
+import { $light4, $light5, $light1, $dangerColor } from "../../style/theme";
 
 const styles = StyleSheet.create<any>({
-  'action-sheet': {
-    position: 'relative',
-    overflow: 'hidden',
+  "action-sheet": {
+    position: "relative",
+    overflow: "hidden",
   },
-  'action-sheet-container': {
+  "action-sheet-container": {
     marginTop: 0,
     marginBottom: 8,
     marginHorizontal: 12,
     borderRadius: 16,
-    overflow: 'hidden',
+    overflow: "hidden",
   },
-  'action-sheet-cover': {
+  "action-sheet-cover": {
     marginBottom: 0,
     marginHorizontal: 0,
     borderRadius: 0,
   },
-  'action-sheet-menu': {
+  "action-sheet-menu": {
     paddingBottom: 8,
     backgroundColor: $light5,
   },
-  'action-sheet-action': {
-    position: 'relative',
+  "action-sheet-action": {
+    position: "relative",
     borderBottomWidth: 0.5,
-    borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+    borderBottomColor: "rgba(0, 0, 0, 0.1)",
   },
-  'action-sheet-action-text': {
+  "action-sheet-action-text": {
     height: 56,
     lineHeight: 56,
-    textAlign: 'center',
+    textAlign: "center",
     backgroundColor: $light1,
     fontSize: 17,
   },
-  'action-sheet-action-destructive': {
+  "action-sheet-action-destructive": {
     color: $dangerColor,
   },
-  'action-sheet-grid': {
-    position: 'relative',
+  "action-sheet-grid": {
+    position: "relative",
     backgroundColor: $light1,
   },
-  'action-sheet-grid-wrapper': {
-    display: 'flex',
+  "action-sheet-grid-wrapper": {
+    display: "flex",
     paddingHorizontal: 12,
     paddingVertical: 16,
   },
-  'action-sheet-grid-item': {
-    position: 'relative',
+  "action-sheet-grid-item": {
+    position: "relative",
     width: 53,
     maxWidth: 53,
     marginRight: 18,
   },
-  'action-sheet-grid-item-icon': {
-    justifyContent: 'center',
-    alignItems: 'center',
+  "action-sheet-grid-item-icon": {
+    justifyContent: "center",
+    alignItems: "center",
     height: 53,
     width: 53,
     borderRadius: 8,
     backgroundColor: $light4,
-    overflow: 'hidden',
-    fontWeight: '500',
+    overflow: "hidden",
+    fontWeight: "500",
     fontSize: 16,
   },
-  'action-sheet-grid-item-name': {
+  "action-sheet-grid-item-name": {
     marginTop: 8,
     fontSize: 12,
   },
-  'action-sheet-title': {
+  "action-sheet-title": {
     fontSize: 12,
-    textAlign: 'center',
-    color: 'rgba(0, 0, 0, 0.5)',
+    textAlign: "center",
+    color: "rgba(0, 0, 0, 0.5)",
   },
-  'action-sheet-cancel': {
+  "action-sheet-cancel": {
     height: 56,
     lineHeight: 56,
-    textAlign: 'center',
+    textAlign: "center",
     backgroundColor: $light1,
     fontSize: 17,
   },

diff --git a/components/assets/iconfont/Icon11.tsx b/components/assets/iconfont/Icon11.tsx
@@ -0,0 +1,39 @@
+/* tslint:disable */
+/* eslint-disable */
+
+import React, { FunctionComponent } from 'react';
+import { ViewProps } from 'react-native';
+import { Svg, GProps, Path } from 'react-native-svg';
+import { getIconColor } from './helper';
+
+interface Props extends GProps, ViewProps {
+  size?: number;
+  color?: string | string[];
+}
+
+let Icon11: FunctionComponent<Props> = ({ size, color, ...rest }) => {
+  return (
+    <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
+      <Path
+        d="M853.333333 290.133333a51.2 51.2 0 0 1 51.2 51.2v409.6a51.2 51.2 0 0 1-51.2 51.2H467.8144l-113.629867 64.785067a25.6 25.6 0 0 1-8.942933 3.089067l-2.372267 0.238933a25.6 25.6 0 0 1-26.9312-24.183467L313.582933 802.133333H256a51.2 51.2 0 0 1-51.2-51.2V341.333333a51.2 51.2 0 0 1 51.2-51.2h597.333333z"
+        fill={getIconColor(color, 0, '#D7EAFF')}
+      />
+      <Path
+        d="M844.8 192A64 64 0 0 1 908.8 256v460.8a64 64 0 0 1-64 64H390.6048l-150.186667 82.295467a25.6 25.6 0 0 1-8.055466 2.798933l-2.833067 0.324267a25.6 25.6 0 0 1-26.7264-21.674667l-0.256-2.474667-3.4304-61.269333H166.4A64 64 0 0 1 102.4 716.8V256a64 64 0 0 1 64-64H844.8z m0 38.4H166.4a25.6 25.6 0 0 0-25.480533 23.1424L140.8 256v460.8a25.6 25.6 0 0 0 23.1424 25.480533l2.4576 0.119467h69.034667l4.317866 77.2608 141.021867-77.2608H844.8a25.6 25.6 0 0 0 25.480533-23.1424L870.4 716.8V256a25.6 25.6 0 0 0-23.1424-25.480533L844.8 230.4z"
+        fill={getIconColor(color, 1, '#1467FF')}
+      />
+      <Path
+        d="M534.5792 618.666667V564.906667h59.4944v-23.6544h-59.4944v-29.7472l0.3584-0.3584h59.136v-23.6544h-45.8752l68.8128-124.7232h-50.8928L512 470.647467l-54.1184-107.8784h-50.8928l68.8128 124.7232h-45.5168v23.6544h58.7776l0.3584 0.3584v29.7472h-59.136V564.906667h59.136v53.76z"
+        fill={getIconColor(color, 2, '#1467FF')}
+      />
+    </Svg>
+  );
+};
+
+Icon11.defaultProps = {
+  size: 18,
+};
+
+Icon11 = React.memo ? React.memo(Icon11) : Icon11;
+
+export default Icon11;