@draftbit/core 46.4.4-8a6164.2 → 46.4.4-8e5cf2.2

package/lib/module/components/Table/TableCell.js

@@ -0,0 +1,37 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { extractStyles } from "../../utilities";
+
+const TableCell = _ref => {
+  let {
+    children,
+    style,
+    numeric,
+    value,
+    ...rest
+  } = _ref;
+  const {
+    textStyles,
+    viewStyles
+  } = extractStyles(style);
+  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    style: [styles.wrapper, numeric && styles.right, viewStyles]
+  }), /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: textStyles
+  }, children, value));
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "row"
+  },
+  right: {
+    justifyContent: "flex-end"
+  }
+});
+export default TableCell;

package/lib/module/components/Table/TableHeader.js

@@ -0,0 +1,27 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+
+const TableHeader = _ref => {
+  let {
+    children,
+    style,
+    theme,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    style: [styles.wrapper, {
+      borderBottomColor: theme.colors.medium
+    }, style]
+  }), children);
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    display: "flex",
+    flexDirection: "row"
+  }
+});
+export default withTheme(TableHeader);

package/lib/module/components/Table/TablePaginator.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+const TablePaginator = () => /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, null, "Table Paginator"));
+
+export default TablePaginator;

package/lib/module/components/Table/TableRow.js

@@ -0,0 +1,33 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+
+const TableRow = _ref => {
+  let {
+    children,
+    style,
+    theme,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    style: [styles.container, {
+      borderBottomColor: theme.colors.light
+    }, style]
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.content
+  }, children));
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "row"
+  },
+  content: {
+    flex: 1,
+    flexDirection: "row"
+  }
+});
+export default withTheme(TableRow);

package/lib/module/components/Table/TableTitle.js

@@ -0,0 +1,47 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { extractStyles } from "../../utilities";
+
+const TableTitle = _ref => {
+  let {
+    children,
+    style,
+    numeric = false,
+    isAscending = false,
+    numberOfLines = 1,
+    title,
+    ...rest
+  } = _ref;
+  const {
+    textStyles,
+    viewStyles
+  } = extractStyles(style);
+  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    style: [styles.wrapper, numeric && styles.right, viewStyles]
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: [isAscending ? styles.sorted : {
+      color: "gray"
+    }, textStyles],
+    numberOfLines: numberOfLines
+  }, children, title));
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "row"
+  },
+  right: {
+    justifyContent: "flex-end"
+  },
+  sorted: {// marginLeft: 8,
+  },
+  icon: {
+    height: 24,
+    justifyContent: "center"
+  }
+});
+export default TableTitle;

package/lib/module/components/Table/index.js

@@ -0,0 +1,6 @@
+export { default as Table } from "./Table";
+export { default as TableHeader } from "./TableHeader";
+export { default as TablePaginator } from "./TablePaginator";
+export { default as TableRow } from "./TableRow";
+export { default as TableCell } from "./TableCell";
+export { default as TableTitle } from "./TableTitle";

package/lib/module/components/Text.js

@@ -11,10 +11,14 @@ class Text extends React.Component {
     super(...arguments);
 
     _defineProperty(this, "_root", void 0);
+
+    _defineProperty(this, "state", {
+      nativeProps: {}
+    });
   }
 
   setNativeProps(args) {
-    return this._root && this._root.setNativeProps(args);
+    this.state.nativeProps = args || {};
   }
 
   render() {
@@ -23,7 +27,7 @@ class Text extends React.Component {
       ...rest
     } = this.props;
     const writingDirection = I18nManager.isRTL ? "rtl" : "ltr";
-    return /*#__PURE__*/React.createElement(NativeText, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement(NativeText, _extends({}, rest, this.state.nativeProps, {
       ref: c => {
         this._root = c;
       },

package/lib/module/components/TextField.js

@@ -16,6 +16,7 @@ class TextField extends React.Component {
     super(...arguments);
 
     _defineProperty(this, "state", {
+      nativeProps: {},
       labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
       focused: false,
       placeholder: this.props.error ? this.props.placeholder : "",
@@ -146,7 +147,9 @@ class TextField extends React.Component {
    * @internal
    */
   setNativeProps(args) {
-    return this._root && this._root.setNativeProps(args);
+    this.setState(state => ({ ...state,
+      nativeState: args || {}
+    }));
   }
 
   isFocused() {
@@ -426,6 +429,7 @@ class TextField extends React.Component {
       underlineColorAndroid: "transparent",
       style: inputStyles,
       ...rest,
+      ...this.state.nativeProps,
       value: this.state.value
     })), rightIconName ? /*#__PURE__*/React.createElement(Icon, {
       name: rightIconName,

package/lib/module/index.js

@@ -31,6 +31,7 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/Ac
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
+export { Table, TableRow, TablePaginator, TableHeader, TableCell, TableTitle } from "./components/Table";
 /* Deprecated: Fix or Delete!  */
 
 export { default as CardBlock } from "./components/CardBlock";

package/lib/module/mappings/Table.js

@@ -0,0 +1,93 @@
+import { COMPONENT_TYPES, GROUPS, createBoolProp, createTextProp, createNumberProp, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Table",
+  tag: "Table",
+  category: COMPONENT_TYPES.container,
+  stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
+  layout: {
+    width: "100%"
+  },
+  props: {}
+}, {
+  name: "Table Row",
+  tag: "TableRow",
+  category: COMPONENT_TYPES.container,
+  stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
+  layout: {
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderBottomWidth: 1,
+    borderStyle: "solid"
+  },
+  props: {}
+}, {
+  name: "Table Cell",
+  tag: "TableCell",
+  category: COMPONENT_TYPES.container,
+  layout: {
+    paddingTop: 16,
+    paddingBottom: 16,
+    paddingLeft: 8,
+    paddingRight: 8
+  },
+  stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
+  props: {
+    numeric: createBoolProp({
+      label: "Is Numeric Cell?",
+      description: "Does the cell contain a numeric value?",
+      group: GROUPS.data
+    }),
+    value: createTextProp({
+      label: "Cell Value",
+      description: "Table Cell Value",
+      group: GROUPS.data
+    })
+  }
+}, {
+  name: "Table Header",
+  tag: "TableHeader",
+  category: COMPONENT_TYPES.container,
+  stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
+  layout: {
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderBottomWidth: 1,
+    borderStyle: "solid",
+    backgroundColor: "#EFEFEF"
+  },
+  props: {}
+}, {
+  name: "Table Title",
+  tag: "TableTitle",
+  category: COMPONENT_TYPES.container,
+  stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects],
+  layout: {
+    fontSize: 14,
+    paddingTop: 16,
+    paddingBottom: 16,
+    paddingLeft: 8,
+    paddingRight: 8
+  },
+  props: {
+    numeric: createBoolProp({
+      label: "Is Numeric Cell?",
+      description: "Does the cell contain a numeric value?",
+      group: GROUPS.data
+    }),
+    value: createTextProp({
+      label: "Cell Value",
+      description: "Table Cell Value",
+      group: GROUPS.data
+    }),
+    isAscending: createBoolProp({
+      label: "Is Ascending?",
+      description: "Does the cell contain a numeric value?",
+      group: GROUPS.data
+    }),
+    numberOfLines: createNumberProp({
+      label: "Number of Lines",
+      description: "Number of Lines",
+      group: GROUPS.basic
+    })
+  }
+}];

package/lib/module/mappings/TextField.js

@@ -16,7 +16,7 @@ const SEED_DATA_PROPS = {
     description: "Can automatically capitalize sentences, words, and characters (Default: none).",
     editable: true,
     required: false,
-    defaultValue: null,
+    defaultValue: "none",
     options: ["none", "sentences", "words", "characters"],
     formType: FORM_TYPES.flatArray,
     propType: PROP_TYPES.STRING

package/lib/module/mappings/TextInput.js

@@ -94,7 +94,7 @@ export const SEED_DATA = [{
       description: "Can automatically capitalize sentences, words, and characters (Default: none).",
       editable: true,
       required: false,
-      defaultValue: null,
+      defaultValue: "none",
       options: ["none", "sentences", "words", "characters"],
       formType: FORM_TYPES.flatArray,
       propType: PROP_TYPES.STRING

package/lib/module/utilities.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native";
-import { isString, isNumber, pick, pickBy, identity } from "lodash";
+import { isString, isNumber, pick, pickBy, identity, omitBy, isNil } from "lodash";
 export function extractStyles(style) {
   const {
     color,
@@ -29,8 +29,8 @@ export function extractStyles(style) {
     textDecorationStyle
   };
   return {
-    viewStyles,
-    textStyles
+    viewStyles: omitBy(viewStyles, isNil),
+    textStyles: omitBy(textStyles, isNil)
   };
 }
 export const borderStyleNames = ["borderRadius", "borderBottomColor", "borderBottomEndRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStartRadius", "borderBottomWidth", "borderColor", "borderEndColor", "borderLeftColor", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightWidth", "borderStartColor", "borderStyle", "borderTopColor", "borderTopEndRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStartRadius", "borderTopWidth", "borderWidth"];

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export interface TableProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Table: ({ children, style, ...rest }: TableProps) => JSX.Element;
+export default Table;

package/lib/typescript/src/components/Table/TableCell.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export interface TableCellProps {
+    children: React.ReactNode;
+    numeric?: boolean;
+    style?: StyleProp<ViewStyle>;
+    value: string;
+}
+declare const TableCell: ({ children, style, numeric, value, ...rest }: TableCellProps) => JSX.Element;
+export default TableCell;

package/lib/typescript/src/components/Table/TableHeader.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+export interface TableHeaderProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    theme: Theme;
+}
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<TableHeaderProps, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<TableHeaderProps> & (({ children, style, theme, ...rest }: TableHeaderProps) => JSX.Element), {}>;
+export default _default;

package/lib/typescript/src/components/Table/TablePaginator.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const TablePaginator: () => JSX.Element;
+export default TablePaginator;

package/lib/typescript/src/components/Table/TableRow.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { Theme } from "../../styles/DefaultTheme";
+export interface TableRowProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    theme: Theme;
+}
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<TableRowProps, "theme"> & {
+    theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<TableRowProps> & (({ children, style, theme, ...rest }: TableRowProps) => JSX.Element), {}>;
+export default _default;

package/lib/typescript/src/components/Table/TableTitle.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export interface TableCellProps {
+    children: React.ReactNode;
+    numeric?: boolean;
+    isAscending: boolean;
+    numberOfLines?: number;
+    title?: string;
+    style?: StyleProp<ViewStyle>;
+}
+declare const TableTitle: ({ children, style, numeric, isAscending, numberOfLines, title, ...rest }: TableCellProps) => JSX.Element;
+export default TableTitle;

package/lib/typescript/src/components/Table/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Table } from "./Table";
+export { default as TableHeader } from "./TableHeader";
+export { default as TablePaginator } from "./TablePaginator";
+export { default as TableRow } from "./TableRow";
+export { default as TableCell } from "./TableCell";
+export { default as TableTitle } from "./TableTitle";

package/lib/typescript/src/components/Text.d.ts

@@ -6,7 +6,8 @@ declare type Props = {
 } & TextProps;
 declare class Text extends React.Component<Props> {
     _root: any;
-    setNativeProps(args: TextProps): any;
+    state: any;
+    setNativeProps(args: TextProps): void;
     render(): JSX.Element;
 }
 export declare const BaseLink: ({ style, theme, title, ...props }: any) => JSX.Element;

package/lib/typescript/src/components/TextField.d.ts

@@ -27,6 +27,7 @@ export declare type Props = {
     }) => React.ReactNode;
 } & TextInputProps & IconSlot;
 interface State {
+    nativeProps: any;
     labeled: Animated.Value;
     focused?: boolean;
     placeholder?: string | undefined;
@@ -57,7 +58,7 @@ declare class TextField extends React.Component<Props, State> {
     /**
      * @internal
      */
-    setNativeProps(args: Props): void | undefined;
+    setNativeProps(args: Props): void;
     isFocused(): boolean | undefined;
     clear(): void | undefined;
     focus(): void | undefined;

package/lib/typescript/src/index.d.ts

@@ -31,6 +31,7 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/A
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
+export { Table, TableRow, TablePaginator, TableHeader, TableCell, TableTitle, } from "./components/Table";
 export { default as CardBlock } from "./components/CardBlock";
 export { default as CardContainer } from "./components/CardContainer";
 export { default as CardContainerRating } from "./components/CardContainerRating";

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

@@ -0,0 +1,148 @@
+export declare const SEED_DATA: ({
+    name: string;
+    tag: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        width: string;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
+        borderBottomWidth?: undefined;
+        borderStyle?: undefined;
+        paddingTop?: undefined;
+        paddingBottom?: undefined;
+        backgroundColor?: undefined;
+        fontSize?: undefined;
+    };
+    props: {
+        numeric?: undefined;
+        value?: undefined;
+        isAscending?: undefined;
+        numberOfLines?: undefined;
+    };
+} | {
+    name: string;
+    tag: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        paddingLeft: number;
+        paddingRight: number;
+        borderBottomWidth: number;
+        borderStyle: string;
+        width?: undefined;
+        paddingTop?: undefined;
+        paddingBottom?: undefined;
+        backgroundColor?: undefined;
+        fontSize?: undefined;
+    };
+    props: {
+        numeric?: undefined;
+        value?: undefined;
+        isAscending?: undefined;
+        numberOfLines?: undefined;
+    };
+} | {
+    name: string;
+    tag: string;
+    category: string;
+    layout: {
+        paddingTop: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        paddingRight: number;
+        width?: undefined;
+        borderBottomWidth?: undefined;
+        borderStyle?: undefined;
+        backgroundColor?: undefined;
+        fontSize?: undefined;
+    };
+    stylesPanelSections: string[];
+    props: {
+        numeric: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        value: any;
+        isAscending?: undefined;
+        numberOfLines?: undefined;
+    };
+} | {
+    name: string;
+    tag: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        paddingLeft: number;
+        paddingRight: number;
+        borderBottomWidth: number;
+        borderStyle: string;
+        backgroundColor: string;
+        width?: undefined;
+        paddingTop?: undefined;
+        paddingBottom?: undefined;
+        fontSize?: undefined;
+    };
+    props: {
+        numeric?: undefined;
+        value?: undefined;
+        isAscending?: undefined;
+        numberOfLines?: undefined;
+    };
+} | {
+    name: string;
+    tag: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        fontSize: number;
+        paddingTop: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        paddingRight: number;
+        width?: undefined;
+        borderBottomWidth?: undefined;
+        borderStyle?: undefined;
+        backgroundColor?: undefined;
+    };
+    props: {
+        numeric: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        value: any;
+        isAscending: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        numberOfLines: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+    };
+})[];

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

@@ -64,7 +64,7 @@ export declare const SEED_DATA: ({
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: null;
+            defaultValue: string;
             options: string[];
             formType: string;
             propType: string;
@@ -371,7 +371,7 @@ export declare const SEED_DATA: ({
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: null;
+            defaultValue: string;
             options: string[];
             formType: string;
             propType: string;

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

@@ -229,7 +229,7 @@ export declare const SEED_DATA: {
             description: string;
             editable: boolean;
             required: boolean;
-            defaultValue: null;
+            defaultValue: string;
             options: string[];
             formType: string;
             propType: string;

package/lib/typescript/src/utilities.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="lodash" />
-import { StyleProp, TextStyle } from "react-native";
+import { StyleProp } from "react-native";
 export declare function extractStyles(style: StyleProp<any>): {
-    viewStyles: any;
-    textStyles: TextStyle;
+    viewStyles: Partial<any>;
+    textStyles: import("lodash").Dictionary<any>;
 };
 export declare const borderStyleNames: string[];
 export declare const marginStyleNames: string[];