@draftbit/core 46.10.2-b59d51.2 → 46.10.2-d11383.2

package/lib/typescript/src/mappings/Table.d.ts

@@ -0,0 +1,337 @@
+export declare const SEED_DATA: ({
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        flex: number;
+        flexDirection?: undefined;
+    };
+    props: {
+        borderWidth: {
+            defaultValue: number;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        borderColor: {
+            defaultValue: string;
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+        };
+        borderStyle: {
+            defaultValue: string;
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            options: never[];
+        };
+        drawTopBorder: {
+            defaultValue: boolean;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        cellVerticalPadding: {
+            defaultValue: number;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        cellHorizontalPadding: {
+            defaultValue: number;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        showsVerticalScrollIndicator: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawBottomBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawStartBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawEndBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+    };
+} | {
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    props: {
+        drawStartBorder: {
+            defaultValue: boolean;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawBottomBorder: {
+            defaultValue: boolean;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        isTableHeader: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        borderWidth: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        borderColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        borderStyle: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        drawTopBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawEndBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        cellVerticalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        cellHorizontalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+    };
+    layout?: undefined;
+} | {
+    name: string;
+    tag: string;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        flex: number;
+        flexDirection: string;
+    };
+    props: {
+        drawEndBorder: {
+            defaultValue: boolean;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        borderWidth: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        borderColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        borderStyle: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        drawTopBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawBottomBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        drawStartBorder: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        cellVerticalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        cellHorizontalPadding: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+    };
+})[];
+//# sourceMappingURL=Table.d.ts.map

package/lib/typescript/src/mappings/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Table.ts"],"names":[],"mappings":"AAsEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmGrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.10.2-b59d51.2+b59d512",
+  "version": "46.10.2-d11383.2+d113833",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.10.2-b59d51.2+b59d512",
+    "@draftbit/types": "^46.10.2-d11383.2+d113833",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -100,5 +100,5 @@
       ]
     ]
   },
-  "gitHead": "b59d512ac6d80b7afb4a89df601d77b5887b5218"
+  "gitHead": "d113833947ba17ec7511e21263997d4de2accde6"
 }

package/src/components/Picker/Picker.js

@@ -38,7 +38,7 @@ const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
 //Empty string for 'value' is treated as a non-value
 //reason: Draftbit uses empty string as initial value for string state*/
-const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", autoDismissKeyboard = true, }) => {
+const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder = "Select an option", value, disabled = false, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", autoDismissKeyboard = true, }) => {
     var _a, _b;
     const androidPickerRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -67,7 +67,12 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
             Keyboard.dismiss();
         }
     }, [pickerVisible, autoDismissKeyboard]);
-    const pickerOptions = normalizeOptions(options);
+    const normalizedOptions = normalizeOptions(options);
+    //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+    //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+    const pickerOptions = placeholder
+        ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+        : normalizedOptions;
     const { viewStyles, textStyles } = extractStyles(style);
     const additionalBorderStyles = ["backgroundColor"];
     const additionalMarginStyles = [
@@ -162,10 +167,14 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
         ...(disabled ? { color: unstyledColor } : {}),
     };
     const handleValueChange = (newValue, itemIndex) => {
-        if (newValue !== "") {
+        if (newValue !== "" && newValue !== placeholder) {
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue, itemIndex);
             setInternalValue(newValue);
         }
+        else if (newValue === placeholder) {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("", 0);
+            setInternalValue(undefined);
+        }
     };
     return (
     /* marginsContainer */

package/src/components/Picker/Picker.tsx

@@ -101,7 +101,7 @@ const Picker: React.FC<PickerProps> = ({
   defaultValue,
   Icon,
   style,
-  placeholder,
+  placeholder = "Select an option",
   value,
   disabled = false,
   assistiveText,
@@ -151,7 +151,13 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [pickerVisible, autoDismissKeyboard]);
 
-  const pickerOptions = normalizeOptions(options);
+  const normalizedOptions = normalizeOptions(options);
+
+  //Underlying Picker component defaults selection to first element when value is not provided (or undefined)
+  //Placholder must be the 1st option in order to allow selection of the 'actual' 1st option
+  const pickerOptions = placeholder
+    ? [{ label: placeholder, value: placeholder }, ...normalizedOptions]
+    : normalizedOptions;
 
   const { viewStyles, textStyles } = extractStyles(style);
 
@@ -302,9 +308,12 @@ const Picker: React.FC<PickerProps> = ({
   };
 
   const handleValueChange = (newValue: string, itemIndex: number) => {
-    if (newValue !== "") {
+    if (newValue !== "" && newValue !== placeholder) {
       onValueChange?.(newValue, itemIndex);
       setInternalValue(newValue);
+    } else if (newValue === placeholder) {
+      onValueChange?.("", 0);
+      setInternalValue(undefined);
     }
   };
 

package/src/components/Table/Table.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { ScrollView, View, StyleSheet, } from "react-native";
+import { withTheme } from "../../theming";
+import { generateBorderStyles, TableStyleContext, } from "./TableCommon";
+const Table = ({ theme, borderWidth = 1, borderColor = theme.colors.divider, borderStyle = "solid", drawTopBorder = true, drawBottomBorder = false, drawStartBorder = false, drawEndBorder = false, cellVerticalPadding = 10, cellHorizontalPadding = 10, data, keyExtractor, renderItem, children: childrenProp, style, ...rest }) => {
+    //Both 'renderItem' and 'data' are optional to allow direct children. But if one is included, both need to be included
+    if ((data && !renderItem) || (renderItem && !data)) {
+        throw new Error("'renderItem' and 'data' need to both be provided to render from 'data'. Either remove them entirley or include both");
+    }
+    if (data && renderItem && childrenProp) {
+        console.warn("'children' of Table ignored due to usage of 'data' and 'renderItem'");
+    }
+    const isTableHeader = React.useCallback((object) => {
+        return object.isTableHeader;
+    }, []);
+    const isRenderItem = data && renderItem;
+    //Uses 'renderItem' and 'data' to create an array of children
+    const dataAsChildren = React.useMemo(() => {
+        if (!isRenderItem)
+            return [];
+        return data.map((item, index) => {
+            const component = renderItem({ item, index });
+            if (!component) {
+                return null;
+            }
+            const key = keyExtractor ? keyExtractor(item, index) : index.toString();
+            return React.cloneElement(component, {
+                key,
+            });
+        });
+    }, [data, renderItem, keyExtractor, isRenderItem]);
+    const children = isRenderItem
+        ? dataAsChildren
+        : React.Children.toArray(childrenProp);
+    const validChildren = React.useMemo(() => children.filter((item) => React.isValidElement(item)), [children]);
+    const childrenWithoutHeader = React.useMemo(() => {
+        const flattenedWithoutNestedHeaders = validChildren.map((item) => {
+            const nestedChildren = React.Children.toArray(item.props.children);
+            //Header can be nested in React.Fragment when in renderItem
+            const nestedHeaders = nestedChildren.filter((child) => isTableHeader(child.props));
+            if (nestedHeaders === null || nestedHeaders === void 0 ? void 0 : nestedHeaders.length) {
+                //New element excluding header children
+                return React.cloneElement(item, {
+                    children: nestedChildren.filter((child) => !isTableHeader(child.props)),
+                });
+            }
+            return item;
+        });
+        return flattenedWithoutNestedHeaders.filter((item) => !isTableHeader(item.props));
+    }, [validChildren, isTableHeader]);
+    const header = React.useMemo(() => {
+        const flattenedPossibleHeaders = validChildren.map((item) => {
+            const nestedChildren = React.Children.toArray(item.props.children);
+            //Header can be nested in React.Fragment when in renderItem
+            const nestedHeaders = nestedChildren.filter((child) => isTableHeader(child.props));
+            if (nestedHeaders === null || nestedHeaders === void 0 ? void 0 : nestedHeaders.length) {
+                return nestedHeaders[0];
+            }
+            return item;
+        });
+        const allHeaders = flattenedPossibleHeaders.filter((item) => isTableHeader(item.props));
+        if (allHeaders.length) {
+            return allHeaders[0]; //Only 1 header taken
+        }
+        return null;
+    }, [validChildren, isTableHeader]);
+    const contextValue = {
+        borderColor,
+        borderStyle,
+        borderWidth,
+        cellHorizontalPadding,
+        cellVerticalPadding,
+    };
+    const borderViewStyle = generateBorderStyles({
+        borderColor,
+        borderWidth,
+        borderStyle,
+        drawTopBorder,
+        drawBottomBorder,
+        drawStartBorder,
+        drawEndBorder,
+    });
+    return (React.createElement(TableStyleContext.Provider, { value: contextValue },
+        React.createElement(View, { style: [styles.container, borderViewStyle, style] },
+            React.createElement(React.Fragment, null, header),
+            React.createElement(ScrollView, { ...rest }, childrenWithoutHeader))));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export default withTheme(Table);