react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/uploader/utils.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveSource = exports.readFileContent = exports.processBeforeRead = exports.normalizeMaxSize = exports.isImageFile = exports.filterFiles = void 0;
+var _utils = require("../../utils");
+const isImageFile = (item, forced) => {
+  if (forced !== undefined) return forced;
+  if (item.file?.type) return item.file.type.indexOf('image') === 0;
+  return (0, _utils.isImageUrlString)(item.url ?? item.thumbnail ?? '');
+};
+exports.isImageFile = isImageFile;
+const resolveSource = (item, isImage) => {
+  if (!isImage) return;
+  if (item.source) return item.source;
+  const uri = item.thumbnail ?? item.url;
+  return uri ? {
+    uri
+  } : undefined;
+};
+exports.resolveSource = resolveSource;
+const normalizeMaxSize = (maxSize, fallback) => {
+  if ((0, _utils.isFunction)(maxSize)) return maxSize;
+  return (0, _utils.parseNumber)(maxSize, fallback);
+};
+exports.normalizeMaxSize = normalizeMaxSize;
+const filterFiles = (files, maxSize) => {
+  const valid = [];
+  const invalid = [];
+  files.forEach(file => {
+    ;
+    (((0, _utils.isFunction)(maxSize) ? maxSize(file) : file.size > maxSize) ? invalid : valid).push(file);
+  });
+  return {
+    valid,
+    invalid
+  };
+};
+exports.filterFiles = filterFiles;
+const readFileContent = async (file, resultType, createObjectUrl) => {
+  if (file?.type?.indexOf('image') === 0) {
+    return createObjectUrl(file);
+  }
+  if (resultType === 'file') return undefined;
+  if ((0, _utils.isUndefined)(FileReader)) {
+    return undefined;
+  }
+  return await new Promise(resolve => {
+    const reader = new FileReader();
+    reader.onload = event => {
+      const result = event.target?.result;
+      resolve(typeof result === 'string' ? result : undefined);
+    };
+    reader.onerror = () => resolve(undefined);
+    if (resultType === 'dataUrl') {
+      reader.readAsDataURL(file);
+    } else {
+      reader.readAsText(file);
+    }
+  });
+};
+exports.readFileContent = readFileContent;
+const processBeforeRead = async (file, files, beforeRead) => {
+  if (!beforeRead) return file;
+  try {
+    return await beforeRead(file, files);
+  } catch {
+    return false;
+  }
+};
+exports.processBeforeRead = processBeforeRead;

package/dist/cjs/water-mark/WaterMark.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../../utils");
+var _tokens = require("./tokens");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const WaterMark = props => {
+  const {
+    content: contentProp,
+    width,
+    height,
+    gapX,
+    gapY,
+    rotate,
+    image,
+    font,
+    fontSize,
+    color,
+    opacity,
+    zIndex: zIndexProp,
+    fullPage: fullPageProp,
+    tokensOverride,
+    style,
+    onLayoutCalculated,
+    textStyle,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useWaterMarkTokens)(tokensOverride);
+  const resolveFiniteNumber = (value, fallback) => (0, _utils.isFiniteNumber)(value) ? value : fallback;
+  const resolveNonNegativeNumber = (value, fallback) => Math.max(0, resolveFiniteNumber(value, fallback));
+  const resolvePositiveNumber = (value, fallback) => Math.max(1, resolveFiniteNumber(value, fallback));
+  const content = contentProp ?? tokens.defaults.content;
+  const zIndex = resolveFiniteNumber(zIndexProp, tokens.defaults.zIndex);
+  const fullPage = fullPageProp ?? tokens.defaults.fullPage;
+  const window = (0, _reactNative().useWindowDimensions)();
+  const [layoutSize, setLayoutSize] = (0, _react().useState)({
+    width: 0,
+    height: 0
+  });
+  const lastLayoutRef = (0, _react().useRef)({
+    width: 0,
+    height: 0
+  });
+  const size = fullPage ? window : layoutSize;
+  const resolvedGapX = resolveNonNegativeNumber(gapX, tokens.defaults.gapX);
+  const resolvedGapY = resolveNonNegativeNumber(gapY, tokens.defaults.gapY);
+  const resolvedRotate = resolveFiniteNumber(rotate, tokens.defaults.rotate);
+  const resolvedOpacity = Math.max(0, Math.min(1, resolveFiniteNumber(opacity, tokens.defaults.opacity)));
+  const fontSizeFromFont = (0, _utils.isFiniteNumber)(font?.size) ? font?.size : (0, _utils.isString)(font?.size) ? Number.parseFloat(font?.size) : undefined;
+  const resolvedFontSize = resolveFiniteNumber((Number.isFinite(fontSizeFromFont ?? Number.NaN) ? fontSizeFromFont : undefined) ?? fontSize, tokens.defaults.fontSize);
+  const normalizedFontSize = Math.max(0, resolvedFontSize);
+  const resolvedColor = font?.color ?? color ?? tokens.colors.mark;
+  const markWidth = resolvePositiveNumber(image?.width ?? width, tokens.defaults.width);
+  const markHeight = resolvePositiveNumber(image?.height ?? height, tokens.defaults.height);
+  const cellWidth = Math.max(1, markWidth + resolvedGapX);
+  const cellHeight = Math.max(1, markHeight + resolvedGapY);
+  const rows = size.height ? Math.ceil(size.height / cellHeight) + 1 : 1;
+  const cols = size.width ? Math.ceil(size.width / cellWidth) + 1 : 1;
+  const handleLayout = event => {
+    if (fullPage) return;
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    if (!(0, _utils.isFiniteNumber)(width) || !(0, _utils.isFiniteNumber)(height)) return;
+    const nextWidth = Math.max(0, width);
+    const nextHeight = Math.max(0, height);
+    if (lastLayoutRef.current.width === nextWidth && lastLayoutRef.current.height === nextHeight) return;
+    lastLayoutRef.current = {
+      width: nextWidth,
+      height: nextHeight
+    };
+    setLayoutSize({
+      width: nextWidth,
+      height: nextHeight
+    });
+    onLayoutCalculated?.({
+      width: nextWidth,
+      height: nextHeight
+    });
+  };
+  (0, _react().useEffect)(() => {
+    if (!fullPage) return;
+    if (!(0, _utils.isFiniteNumber)(window.width) || !(0, _utils.isFiniteNumber)(window.height)) return;
+    if (window.width <= 0 || window.height <= 0) return;
+    onLayoutCalculated?.({
+      width: window.width,
+      height: window.height
+    });
+  }, [fullPage, onLayoutCalculated, window.width, window.height]);
+  const zIndexStyle = (0, _react().useMemo)(() => ({
+    zIndex
+  }), [zIndex]);
+  const cellStyle = (0, _react().useMemo)(() => ({
+    width: cellWidth,
+    height: cellHeight
+  }), [cellWidth, cellHeight]);
+  const oddRowStyle = (0, _react().useMemo)(() => ({
+    paddingLeft: cellWidth / 2
+  }), [cellWidth]);
+  const markStyle = (0, _react().useMemo)(() => ({
+    width: markWidth,
+    height: markHeight,
+    transform: [{
+      rotate: `${resolvedRotate}deg`
+    }]
+  }), [markHeight, markWidth, resolvedRotate]);
+  const imageStyle = (0, _react().useMemo)(() => ({
+    width: markWidth,
+    height: markHeight,
+    opacity: resolvedOpacity
+  }), [markHeight, markWidth, resolvedOpacity]);
+  const textBaseStyle = (0, _react().useMemo)(() => ({
+    fontSize: normalizedFontSize,
+    color: resolvedColor,
+    opacity: resolvedOpacity,
+    fontFamily: font?.family,
+    fontWeight: font?.weight
+  }), [font?.family, font?.weight, normalizedFontSize, resolvedColor, resolvedOpacity]);
+  const rowIndexes = (0, _react().useMemo)(() => Array.from({
+    length: rows
+  }, (_, i) => i), [rows]);
+  const colIndexes = (0, _react().useMemo)(() => Array.from({
+    length: cols
+  }, (_, i) => i), [cols]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    pointerEvents: "none",
+    style: [fullPage ? tokens.layout.absoluteFill : null, zIndexStyle, style],
+    onLayout: handleLayout
+  }, rest), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.wrapper
+  }, rowIndexes.map(rowIndex => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    key: `row-${rowIndex}`,
+    style: [tokens.layout.row, rowIndex % 2 === 0 ? null : oddRowStyle]
+  }, colIndexes.map(colIndex => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    key: `col-${rowIndex}-${colIndex}`,
+    style: [tokens.layout.cell, cellStyle]
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [tokens.layout.mark, markStyle]
+  }, image ? /*#__PURE__*/_react().default.createElement(_reactNative().Image, {
+    source: {
+      uri: image.src
+    },
+    style: imageStyle,
+    resizeMode: "contain"
+  }) : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    allowFontScaling: false,
+    style: [textBaseStyle, textStyle]
+  }, content))))))));
+};
+WaterMark.displayName = 'WaterMark';
+var _default = exports.default = WaterMark;

package/dist/cjs/water-mark/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "WaterMark", {
+  enumerable: true,
+  get: function () {
+    return _WaterMark.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useWaterMarkTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.useWaterMarkTokens;
+  }
+});
+var _WaterMark = _interopRequireDefault(require("./WaterMark"));
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _WaterMark.default;

package/dist/cjs/water-mark/tokens.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWaterMarkTokens = void 0;
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+const createTokens = foundations => {
+  const {
+    palette
+  } = foundations;
+  return {
+    defaults: {
+      content: 'WaterMark',
+      width: 120,
+      height: 64,
+      gapX: 24,
+      gapY: 48,
+      rotate: -22,
+      fontSize: 14,
+      opacity: 0.15,
+      zIndex: 2000,
+      fullPage: true
+    },
+    layout: {
+      absoluteFill: _reactNative().StyleSheet.absoluteFillObject,
+      wrapper: {
+        flex: 1
+      },
+      row: {
+        flexDirection: 'row'
+      },
+      cell: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      mark: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    },
+    colors: {
+      mark: palette.default[500]
+    }
+  };
+};
+const useWaterMarkTokens = exports.useWaterMarkTokens = (0, _designSystem.createComponentTokensHook)('waterMark', createTokens);

package/dist/es/action-sheet/ActionSheet.js

@@ -0,0 +1,279 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useRef } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { Close } from 'react-native-system-icon';
+import { useAriaPress } from '../../hooks';
+import { createHairlineBorderBottom, isRenderable, isText } from '../../utils';
+import Loading from '../loading';
+import Popup from '../popup';
+import { useActionSheetTokens } from './tokens';
+const defaultCloseIcon = /*#__PURE__*/React.createElement(Close, {
+  size: 18
+});
+const ActionSheetHeader = /*#__PURE__*/React.memo(({
+  title,
+  closeable,
+  closeIcon,
+  tokens,
+  onClose
+}) => {
+  const closePress = useAriaPress({
+    onPress: onClose
+  });
+  const {
+    colors,
+    typography
+  } = tokens;
+  return /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.header
+  }, /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.titleContainer
+  }, isText(title) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.title, {
+      color: colors.title,
+      fontSize: typography.title
+    }]
+  }, title) : /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.titleNode
+  }, title)), closeable ? /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: tokens.layout.closeButton,
+    accessibilityRole: "button",
+    hitSlop: 8
+  }, closePress.interactionProps), /*#__PURE__*/React.isValidElement(closeIcon) ? /*#__PURE__*/React.cloneElement(closeIcon, {
+    fill: colors.description,
+    color: colors.description
+  }) : closeIcon) : null);
+});
+ActionSheetHeader.displayName = 'ActionSheetHeader';
+const ActionSheetItem = /*#__PURE__*/React.memo(({
+  action,
+  index,
+  tokens,
+  onActionPress
+}) => {
+  const disabled = !!action.disabled;
+  const loading = !!action.loading;
+  const {
+    colors,
+    spacing,
+    typography
+  } = tokens;
+  const handlePress = useCallback(() => onActionPress(action, index), [action, index, onActionPress]);
+  const actionPress = useAriaPress({
+    disabled: disabled || loading,
+    onPress: handlePress,
+    extraProps: {
+      accessibilityRole: 'button',
+      accessibilityState: {
+        disabled,
+        busy: loading
+      },
+      testID: `rv-action-sheet-item-${index}`
+    }
+  });
+  const color = action.color ?? colors.item;
+  const name = action.name;
+  const subname = action.subname;
+  const hasIcon = !!action.icon;
+  const hasName = isRenderable(name);
+  const hasSubname = isRenderable(subname);
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: ({
+      pressed
+    }) => [tokens.layout.item, hasIcon && tokens.layout.itemWithIcon, {
+      paddingVertical: spacing.vertical,
+      paddingHorizontal: spacing.horizontal,
+      backgroundColor: pressed && !disabled && !loading ? colors.itemPressedBackground : colors.itemBackground
+    }, action.style]
+  }, actionPress.interactionProps), hasIcon && /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.icon
+  }, action.icon), loading ? /*#__PURE__*/React.createElement(Loading, {
+    size: 20
+  }) : hasName ? /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.itemTextWrapper
+  }, isText(name) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.itemText, {
+      color: disabled ? colors.disabled : color,
+      fontSize: typography.item
+    }]
+  }, name) : name, hasSubname ? isText(subname) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.subname, {
+      color: colors.subitem
+    }]
+  }, subname) : /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.subnameNode
+  }, subname) : null) : null);
+});
+ActionSheetItem.displayName = 'ActionSheetItem';
+const ActionSheetCancel = /*#__PURE__*/React.memo(({
+  cancelText,
+  tokens,
+  onPress
+}) => {
+  const {
+    colors,
+    spacing,
+    typography
+  } = tokens;
+  const cancelPress = useAriaPress({
+    onPress,
+    extraProps: {
+      accessibilityRole: 'button',
+      testID: 'rv-action-sheet-cancel'
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.cancelGap, {
+      height: spacing.cancelGap,
+      backgroundColor: colors.cancelGapBackground
+    }]
+  }), /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: [tokens.layout.cancel, {
+      paddingVertical: spacing.vertical,
+      paddingHorizontal: spacing.horizontal,
+      backgroundColor: colors.cancelBackground
+    }]
+  }, cancelPress.interactionProps), isText(cancelText) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.cancelText, {
+      color: colors.cancel,
+      fontSize: typography.item
+    }]
+  }, cancelText) : cancelText));
+});
+ActionSheetCancel.displayName = 'ActionSheetCancel';
+const ActionSheet = props => {
+  const {
+    tokensOverride,
+    visible,
+    title,
+    description,
+    cancelText,
+    actions = [],
+    closeOnClickAction: closeOnClickActionProp,
+    closeOnSelect,
+    closeable: closeableProp,
+    closeIcon = defaultCloseIcon,
+    beforeClose,
+    onSelect,
+    onCancel,
+    onClose,
+    children,
+    round: roundProp,
+    safeAreaInsetBottom: safeAreaInsetBottomProp,
+    overlay: overlayProp,
+    lockScroll: lockScrollProp,
+    style: popupStyle,
+    ...popupProps
+  } = props;
+  const tokens = useActionSheetTokens(tokensOverride);
+  const closeable = closeableProp ?? tokens.defaults.closeable;
+  const round = roundProp ?? tokens.defaults.round;
+  const safeAreaInsetBottom = safeAreaInsetBottomProp ?? tokens.defaults.safeAreaInsetBottom;
+  const overlay = overlayProp ?? tokens.defaults.overlay;
+  const lockScroll = lockScrollProp ?? tokens.defaults.lockScroll;
+  const shouldCloseOnClickAction = closeOnClickActionProp ?? closeOnSelect ?? tokens.defaults.closeOnClickAction;
+  const hasTitle = isRenderable(title);
+  const hasDescription = isRenderable(description);
+  const hasCancelText = isRenderable(cancelText);
+  const lastPopupCloseReasonRef = useRef('close');
+  const closingRef = useRef(false);
+  const runBeforeClose = useCallback(async action => {
+    if (!beforeClose) return true;
+    try {
+      return (await beforeClose(action)) !== false;
+    } catch (error) {
+      return true;
+    }
+  }, [beforeClose]);
+  const emitClose = useCallback(reason => {
+    if (onClose) {
+      if (reason === 'cancel') {
+        onCancel?.();
+      }
+      onClose();
+      return;
+    }
+    onCancel?.();
+  }, [onCancel, onClose]);
+  const requestClose = useCallback(async action => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    try {
+      const allowed = await runBeforeClose(action);
+      if (!allowed) return;
+      emitClose(action);
+    } finally {
+      closingRef.current = false;
+    }
+  }, [emitClose, runBeforeClose]);
+  const handlePopupBeforeClose = useCallback(reason => {
+    const action = reason === 'close-icon' ? 'close-icon' : reason === 'overlay' ? 'overlay' : 'close';
+    lastPopupCloseReasonRef.current = action;
+    return runBeforeClose(action);
+  }, [runBeforeClose]);
+  const handlePopupClose = useCallback(() => {
+    emitClose(lastPopupCloseReasonRef.current);
+  }, [emitClose]);
+  const handleCancel = useCallback(() => {
+    void requestClose('cancel');
+  }, [requestClose]);
+  const handleCloseIcon = useCallback(() => {
+    void requestClose('close-icon');
+  }, [requestClose]);
+  const handleActionPress = useCallback((action, index) => {
+    if (action.disabled || action.loading) {
+      return;
+    }
+    action.onPress?.(action);
+    action.callback?.(action);
+    onSelect?.(action, index);
+    if (shouldCloseOnClickAction) {
+      void requestClose('action');
+    }
+  }, [onSelect, requestClose, shouldCloseOnClickAction]);
+  return /*#__PURE__*/React.createElement(Popup, _extends({
+    visible: visible,
+    placement: "bottom",
+    round: round,
+    safeAreaInsetTop: hasTitle && closeable,
+    safeAreaInsetBottom: safeAreaInsetBottom,
+    overlay: overlay,
+    lockScroll: lockScroll,
+    beforeClose: handlePopupBeforeClose,
+    onClose: handlePopupClose,
+    style: [tokens.layout.popup, popupStyle]
+  }, popupProps), /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.panel, {
+      backgroundColor: tokens.colors.background
+    }]
+  }, hasTitle ? /*#__PURE__*/React.createElement(ActionSheetHeader, {
+    title: title,
+    closeable: closeable,
+    closeIcon: closeIcon,
+    tokens: tokens,
+    onClose: handleCloseIcon
+  }) : null, hasDescription ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.descriptionContainer, createHairlineBorderBottom(tokens.colors.border)]
+  }, isText(description) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.description, {
+      color: tokens.colors.description,
+      fontSize: tokens.typography.description
+    }]
+  }, description) : /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.descriptionNode
+  }, description)) : null, /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.actions
+  }, actions.map((action, index) => /*#__PURE__*/React.createElement(ActionSheetItem, {
+    key: action.key ?? index,
+    action: action,
+    index: index,
+    tokens: tokens,
+    onActionPress: handleActionPress
+  }))), children, hasCancelText ? /*#__PURE__*/React.createElement(ActionSheetCancel, {
+    cancelText: cancelText,
+    tokens: tokens,
+    onPress: handleCancel
+  }) : null));
+};
+ActionSheet.displayName = 'ActionSheet';
+export default ActionSheet;

package/dist/es/action-sheet/index.js

@@ -0,0 +1,3 @@
+import ActionSheet from './ActionSheet';
+export { useActionSheetTokens } from './tokens';
+export default ActionSheet;