@draftbit/core 47.0.1-ed6e56.2 → 47.1.1-1883fa.2

package/src/mappings/Touchable.js

@@ -1,17 +1,60 @@
-import { COMPONENT_TYPES, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
-export const SEED_DATA = {
-    name: "Touchable",
-    tag: "Touchable",
-    description: "Simple button with no styles",
-    category: COMPONENT_TYPES.button,
+import { COMPONENT_TYPES, createActionProp, Triggers, createStaticNumberProp, StylesPanelSections, } from "@draftbit/types";
+const SEED_DATA_PROPS = {
     stylesPanelSections: [
         StylesPanelSections.Size,
         StylesPanelSections.Margins,
         StylesPanelSections.Borders,
     ],
     layout: {},
-    triggers: [Triggers.OnPress],
+    triggers: [Triggers.OnPress, Triggers.OnLongPress],
     props: {
         onPress: createActionProp(),
+        onLongPress: createActionProp(),
+        activeOpacity: createStaticNumberProp({
+            label: "Active Opacity",
+            description: "The opacity when the button is pressed.",
+            defaultValue: 0.8,
+            min: 0,
+            max: 1,
+            step: 0.01,
+            precision: 2,
+            required: false,
+        }),
+        disabledOpacity: createStaticNumberProp({
+            label: "Disabled Opacity",
+            description: "The opacity when the button is disabled.",
+            defaultValue: 0.8,
+            min: 0,
+            max: 1,
+            step: 0.01,
+            precision: 2,
+            required: false,
+        }),
+        delayLongPress: createStaticNumberProp({
+            label: "Delay Long Press",
+            description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
+            required: false,
+        }),
+        hitSlop: createStaticNumberProp({
+            label: "Hit Slop",
+            description: "Sets additional distance outside of element in which a press can be detected.",
+            required: false,
+        }),
     },
 };
+export const SEED_DATA = [
+    {
+        name: "Touchable",
+        tag: "Touchable",
+        description: "An interactive view with no styles",
+        category: COMPONENT_TYPES.button,
+        ...SEED_DATA_PROPS,
+    },
+    {
+        name: "Pressable",
+        tag: "Pressable",
+        description: "An interactive view with no styles",
+        category: COMPONENT_TYPES.button,
+        ...SEED_DATA_PROPS,
+    },
+];

package/src/mappings/Touchable.ts

@@ -2,22 +2,69 @@ import {
   COMPONENT_TYPES,
   createActionProp,
   Triggers,
+  createStaticNumberProp,
   StylesPanelSections,
 } from "@draftbit/types";
 
-export const SEED_DATA = {
-  name: "Touchable",
-  tag: "Touchable",
-  description: "Simple button with no styles",
-  category: COMPONENT_TYPES.button,
+const SEED_DATA_PROPS = {
   stylesPanelSections: [
     StylesPanelSections.Size,
     StylesPanelSections.Margins,
     StylesPanelSections.Borders,
   ],
   layout: {},
-  triggers: [Triggers.OnPress],
+  triggers: [Triggers.OnPress, Triggers.OnLongPress],
   props: {
     onPress: createActionProp(),
+    onLongPress: createActionProp(),
+    activeOpacity: createStaticNumberProp({
+      label: "Active Opacity",
+      description: "The opacity when the button is pressed.",
+      defaultValue: 0.8,
+      min: 0,
+      max: 1,
+      step: 0.01,
+      precision: 2,
+      required: false,
+    }),
+    disabledOpacity: createStaticNumberProp({
+      label: "Disabled Opacity",
+      description: "The opacity when the button is disabled.",
+      defaultValue: 0.8,
+      min: 0,
+      max: 1,
+      step: 0.01,
+      precision: 2,
+      required: false,
+    }),
+    delayLongPress: createStaticNumberProp({
+      label: "Delay Long Press",
+      description:
+        "Duration (in milliseconds) from onPressIn before onLongPress is called.",
+      required: false,
+    }),
+    hitSlop: createStaticNumberProp({
+      label: "Hit Slop",
+      description:
+        "Sets additional distance outside of element in which a press can be detected.",
+      required: false,
+    }),
   },
 };
+
+export const SEED_DATA = [
+  {
+    name: "Touchable",
+    tag: "Touchable",
+    description: "An interactive view with no styles",
+    category: COMPONENT_TYPES.button,
+    ...SEED_DATA_PROPS,
+  },
+  {
+    name: "Pressable",
+    tag: "Pressable",
+    description: "An interactive view with no styles",
+    category: COMPONENT_TYPES.button,
+    ...SEED_DATA_PROPS,
+  },
+];

package/lib/commonjs/components/DatePicker/DatePickerInput.js

@@ -1,133 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _dateformat = _interopRequireDefault(require("dateformat"));
-var _Portal = _interopRequireDefault(require("../Portal/Portal"));
-var _Touchable = _interopRequireDefault(require("../Touchable"));
-var _DatePickerComponent = _interopRequireDefault(require("./DatePickerComponent"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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); }
-const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-const DatePickerInput = _ref => {
-  let {
-    style,
-    date,
-    onDateChange = () => {},
-    defaultValue,
-    disabled = false,
-    mode = "date",
-    format,
-    androidDisplay = "default",
-    iosDisplay = "default",
-    webDisplay = "dialog",
-    placeholder,
-    ...props
-  } = _ref;
-  const [value, setValue] = React.useState(date || defaultValue);
-  React.useEffect(() => {
-    if (defaultValue != null) {
-      setValue(defaultValue);
-    }
-  }, [defaultValue]);
-  const [pickerVisible, setPickerVisible] = React.useState(false);
-  const [focused, setFocused] = React.useState(false);
-  const getValidDate = () => {
-    if (!value) {
-      return new Date();
-    }
-    return typeof (value === null || value === void 0 ? void 0 : value.getMonth) === "function" ? value : new Date();
-  };
-  const formatDate = () => {
-    if (!value) return "";
-    let newDate = getValidDate();
-    if (format) return (0, _dateformat.default)(newDate, format);
-    if (mode === "time") {
-      return "".concat(newDate.toLocaleTimeString());
-    }
-    if (mode === "datetime") {
-      return "".concat(newDate.toLocaleString());
-    }
-    return "".concat(MONTHS[newDate.getMonth()], " ").concat(newDate.getDate(), ", ").concat(newDate.getFullYear());
-  };
-  const toggleVisibility = async () => {
-    setPickerVisible(!pickerVisible);
-    focused ? _handleBlur() : _handleFocus();
-  };
-  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  React.useEffect(() => {
-    setValue(date);
-  }, [date]);
-  const _handleFocus = () => {
-    if (disabled) {
-      return;
-    }
-    setFocused(true);
-  };
-  const _handleBlur = () => {
-    if (disabled) {
-      return;
-    }
-    setFocused(false);
-  };
-  return /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_Touchable.default, {
-    disabled: disabled,
-    onPress: toggleVisibility
-  }, /*#__PURE__*/React.createElement(_reactNative.TextInput, _extends({
-    value: formatDate(),
-    placeholder: placeholder,
-    editable: !disabled,
-    onFocus: _handleFocus,
-    onBlur: _handleBlur,
-    style: style
-  }, props))), pickerVisible && /*#__PURE__*/React.createElement(_Portal.default, null, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: {
-      paddingTop: insets.top,
-      paddingBottom: insets.bottom,
-      paddingLeft: insets.left,
-      paddingRight: insets.right
-    }
-  }, _reactNative.Platform.OS === "web" && /*#__PURE__*/React.createElement(_DatePickerComponent.default, {
-    value: getValidDate(),
-    mode: mode,
-    isVisible: pickerVisible,
-    toggleVisibility: toggleVisibility,
-    onChange: (_event, data) => {
-      toggleVisibility();
-      setValue(data);
-      onDateChange(data);
-    }
-  }), _reactNative.Platform.OS === "ios" && /*#__PURE__*/React.createElement(_DatePickerComponent.default, {
-    value: getValidDate(),
-    mode: mode,
-    displayMode: iosDisplay,
-    isVisible: pickerVisible,
-    toggleVisibility: toggleVisibility,
-    onChange: (_event, data) => {
-      toggleVisibility();
-      setValue(data);
-      onDateChange(data);
-    }
-  }), _reactNative.Platform.OS === "android" && /*#__PURE__*/React.createElement(_DatePickerComponent.default, {
-    value: getValidDate(),
-    mode: mode,
-    variant: webDisplay,
-    displayMode: androidDisplay,
-    isVisible: pickerVisible,
-    toggleVisibility: toggleVisibility,
-    onChange: (_event, data) => {
-      toggleVisibility();
-      setValue(data);
-      onDateChange(data);
-    }
-  }))));
-};
-var _default = DatePickerInput;
-exports.default = _default;

package/lib/module/components/DatePicker/DatePickerInput.js

@@ -1,123 +0,0 @@
-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 * as React from "react";
-import { View, TextInput, Platform } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import dateFormat from "dateformat";
-import Portal from "../Portal/Portal";
-import Touchable from "../Touchable";
-import DateTimePicker from "./DatePickerComponent";
-const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-const DatePickerInput = _ref => {
-  let {
-    style,
-    date,
-    onDateChange = () => {},
-    defaultValue,
-    disabled = false,
-    mode = "date",
-    format,
-    androidDisplay = "default",
-    iosDisplay = "default",
-    webDisplay = "dialog",
-    placeholder,
-    ...props
-  } = _ref;
-  const [value, setValue] = React.useState(date || defaultValue);
-  React.useEffect(() => {
-    if (defaultValue != null) {
-      setValue(defaultValue);
-    }
-  }, [defaultValue]);
-  const [pickerVisible, setPickerVisible] = React.useState(false);
-  const [focused, setFocused] = React.useState(false);
-  const getValidDate = () => {
-    if (!value) {
-      return new Date();
-    }
-    return typeof (value === null || value === void 0 ? void 0 : value.getMonth) === "function" ? value : new Date();
-  };
-  const formatDate = () => {
-    if (!value) return "";
-    let newDate = getValidDate();
-    if (format) return dateFormat(newDate, format);
-    if (mode === "time") {
-      return "".concat(newDate.toLocaleTimeString());
-    }
-    if (mode === "datetime") {
-      return "".concat(newDate.toLocaleString());
-    }
-    return "".concat(MONTHS[newDate.getMonth()], " ").concat(newDate.getDate(), ", ").concat(newDate.getFullYear());
-  };
-  const toggleVisibility = async () => {
-    setPickerVisible(!pickerVisible);
-    focused ? _handleBlur() : _handleFocus();
-  };
-  const insets = useSafeAreaInsets();
-  React.useEffect(() => {
-    setValue(date);
-  }, [date]);
-  const _handleFocus = () => {
-    if (disabled) {
-      return;
-    }
-    setFocused(true);
-  };
-  const _handleBlur = () => {
-    if (disabled) {
-      return;
-    }
-    setFocused(false);
-  };
-  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Touchable, {
-    disabled: disabled,
-    onPress: toggleVisibility
-  }, /*#__PURE__*/React.createElement(TextInput, _extends({
-    value: formatDate(),
-    placeholder: placeholder,
-    editable: !disabled,
-    onFocus: _handleFocus,
-    onBlur: _handleBlur,
-    style: style
-  }, props))), pickerVisible && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
-    style: {
-      paddingTop: insets.top,
-      paddingBottom: insets.bottom,
-      paddingLeft: insets.left,
-      paddingRight: insets.right
-    }
-  }, Platform.OS === "web" && /*#__PURE__*/React.createElement(DateTimePicker, {
-    value: getValidDate(),
-    mode: mode,
-    isVisible: pickerVisible,
-    toggleVisibility: toggleVisibility,
-    onChange: (_event, data) => {
-      toggleVisibility();
-      setValue(data);
-      onDateChange(data);
-    }
-  }), Platform.OS === "ios" && /*#__PURE__*/React.createElement(DateTimePicker, {
-    value: getValidDate(),
-    mode: mode,
-    displayMode: iosDisplay,
-    isVisible: pickerVisible,
-    toggleVisibility: toggleVisibility,
-    onChange: (_event, data) => {
-      toggleVisibility();
-      setValue(data);
-      onDateChange(data);
-    }
-  }), Platform.OS === "android" && /*#__PURE__*/React.createElement(DateTimePicker, {
-    value: getValidDate(),
-    mode: mode,
-    variant: webDisplay,
-    displayMode: androidDisplay,
-    isVisible: pickerVisible,
-    toggleVisibility: toggleVisibility,
-    onChange: (_event, data) => {
-      toggleVisibility();
-      setValue(data);
-      onDateChange(data);
-    }
-  }))));
-};
-export default DatePickerInput;

package/lib/typescript/src/components/DatePicker/DatePickerInput.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { StyleProp, ViewStyle, TextInputProps } from "react-native";
-declare type Props = {
-    style?: StyleProp<ViewStyle>;
-    date?: Date;
-    format?: string;
-    onDateChange?: (data?: Date) => void;
-    defaultValue?: Date;
-    disabled?: boolean;
-    mode?: "date" | "time" | "datetime";
-    androidDisplay: "default" | "spinner" | "calendar" | "clock";
-    iosDisplay: "default" | "spinner" | "compact" | "inline";
-    webDisplay: "dialog" | "inline";
-    placeholder?: string;
-} & TextInputProps;
-declare const DatePickerInput: React.FC<React.PropsWithChildren<Props>>;
-export default DatePickerInput;
-//# sourceMappingURL=DatePickerInput.d.ts.map

package/lib/typescript/src/components/DatePicker/DatePickerInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DatePickerInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,SAAS,EACT,SAAS,EACT,cAAc,EAGf,MAAM,cAAc,CAAC;AAQtB,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,cAAc,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC7D,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACzD,UAAU,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,cAAc,CAAC;AAiBnB,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAmJ7D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/src/components/DatePicker/DatePickerInput.js

@@ -1,97 +0,0 @@
-import * as React from "react";
-import { View, TextInput, Platform, } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import dateFormat from "dateformat";
-import Portal from "../Portal/Portal";
-import Touchable from "../Touchable";
-import DateTimePicker from "./DatePickerComponent";
-const MONTHS = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-];
-const DatePickerInput = ({ style, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, androidDisplay = "default", iosDisplay = "default", webDisplay = "dialog", placeholder, ...props }) => {
-    const [value, setValue] = React.useState(date || defaultValue);
-    React.useEffect(() => {
-        if (defaultValue != null) {
-            setValue(defaultValue);
-        }
-    }, [defaultValue]);
-    const [pickerVisible, setPickerVisible] = React.useState(false);
-    const [focused, setFocused] = React.useState(false);
-    const getValidDate = () => {
-        if (!value) {
-            return new Date();
-        }
-        return typeof (value === null || value === void 0 ? void 0 : value.getMonth) === "function" ? value : new Date();
-    };
-    const formatDate = () => {
-        if (!value)
-            return "";
-        let newDate = getValidDate();
-        if (format)
-            return dateFormat(newDate, format);
-        if (mode === "time") {
-            return `${newDate.toLocaleTimeString()}`;
-        }
-        if (mode === "datetime") {
-            return `${newDate.toLocaleString()}`;
-        }
-        return `${MONTHS[newDate.getMonth()]} ${newDate.getDate()}, ${newDate.getFullYear()}`;
-    };
-    const toggleVisibility = async () => {
-        setPickerVisible(!pickerVisible);
-        focused ? _handleBlur() : _handleFocus();
-    };
-    const insets = useSafeAreaInsets();
-    React.useEffect(() => {
-        setValue(date);
-    }, [date]);
-    const _handleFocus = () => {
-        if (disabled) {
-            return;
-        }
-        setFocused(true);
-    };
-    const _handleBlur = () => {
-        if (disabled) {
-            return;
-        }
-        setFocused(false);
-    };
-    return (React.createElement(View, null,
-        React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
-            React.createElement(TextInput, { value: formatDate(), placeholder: placeholder, editable: !disabled, onFocus: _handleFocus, onBlur: _handleBlur, style: style, ...props })),
-        pickerVisible && (React.createElement(Portal, null,
-            React.createElement(View, { style: {
-                    paddingTop: insets.top,
-                    paddingBottom: insets.bottom,
-                    paddingLeft: insets.left,
-                    paddingRight: insets.right,
-                } },
-                Platform.OS === "web" && (React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
-                        toggleVisibility();
-                        setValue(data);
-                        onDateChange(data);
-                    } })),
-                Platform.OS === "ios" && (React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, displayMode: iosDisplay, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
-                        toggleVisibility();
-                        setValue(data);
-                        onDateChange(data);
-                    } })),
-                Platform.OS === "android" && (React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, variant: webDisplay, displayMode: androidDisplay, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
-                        toggleVisibility();
-                        setValue(data);
-                        onDateChange(data);
-                    } })))))));
-};
-export default DatePickerInput;