react-native-system-ui 0.0.4 → 0.0.6

package/dist/es/components/pagination/Pagination.js

@@ -1,141 +0,0 @@
-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, { useEffect } from 'react';
-import { Pressable, Text, View } from 'react-native';
-import { usePaginationTokens } from './tokens';
-import { useControllableValue } from '../../hooks';
-import { clamp } from '../../utils/number';
-import { isText } from '../../utils/validate';
-const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    tokensOverride,
-    mode: modeProp,
-    pageCount: pageCountProp,
-    totalItems: totalItemsProp,
-    itemsPerPage: itemsPerPageProp,
-    showPageSize: showPageSizeProp,
-    forceEllipses: forceEllipsesProp,
-    prevText: prevTextProp,
-    nextText: nextTextProp,
-    pageDesc,
-    pageRender,
-    style,
-    ...rest
-  } = props;
-  const tokens = usePaginationTokens(tokensOverride);
-  const mode = modeProp ?? tokens.defaults.mode;
-  const pageCount = pageCountProp ?? tokens.defaults.pageCount;
-  const totalItems = totalItemsProp ?? tokens.defaults.totalItems;
-  const itemsPerPage = itemsPerPageProp ?? tokens.defaults.itemsPerPage;
-  const showPageSize = showPageSizeProp ?? tokens.defaults.showPageSize;
-  const forceEllipses = forceEllipsesProp ?? tokens.defaults.forceEllipses;
-  const prevText = prevTextProp ?? tokens.defaults.prevText;
-  const nextText = nextTextProp ?? tokens.defaults.nextText;
-  const [page, setPage] = useControllableValue(props, {
-    defaultValue: tokens.defaults.defaultPage
-  });
-  const pageCountNumber = Number.isFinite(pageCount) ? Math.floor(pageCount) : 0;
-  const totalItemsNumber = Number.isFinite(totalItems) ? Math.floor(totalItems) : 0;
-  const itemsPerPageNumber = Number.isFinite(itemsPerPage) ? Math.floor(itemsPerPage) : 0;
-  const showPageSizeNumber = Number.isFinite(showPageSize) ? Math.floor(showPageSize) : 0;
-  const count = pageCountNumber > 0 ? pageCountNumber : totalItemsNumber > 0 && itemsPerPageNumber > 0 ? Math.max(1, Math.ceil(totalItemsNumber / itemsPerPageNumber)) : 1;
-  const currentPage = clamp(page, 1, count);
-  const pages = (() => {
-    const items = [];
-    if (mode !== 'multi') return items;
-    const limit = Math.max(1, showPageSizeNumber);
-    let startPage = 1;
-    let endPage = count;
-    const maxSized = limit < count;
-    if (maxSized) {
-      startPage = Math.max(currentPage - Math.floor(limit / 2), 1);
-      endPage = startPage + limit - 1;
-      if (endPage > count) {
-        endPage = count;
-        startPage = endPage - limit + 1;
-      }
-    }
-    for (let number = startPage; number <= endPage; number += 1) {
-      items.push({
-        number,
-        text: number,
-        active: number === currentPage
-      });
-    }
-    if (maxSized && forceEllipses) {
-      if (startPage > 1) items.unshift({
-        number: startPage - 1,
-        text: '...'
-      });
-      if (endPage < count) items.push({
-        number: endPage + 1,
-        text: '...'
-      });
-    }
-    return items;
-  })();
-  useEffect(() => {
-    if (page !== currentPage) {
-      setPage(currentPage);
-    }
-  }, [currentPage, page, setPage]);
-  const handleSelect = next => setPage(clamp(next, 1, count));
-  const renderPage = (item, index) => {
-    const node = pageRender ? pageRender(item) : item.text;
-    const textColor = item.active ? tokens.colors.activeText : tokens.colors.text;
-    return /*#__PURE__*/React.createElement(Pressable, {
-      accessibilityRole: "button",
-      key: `${item.number}-${index}`,
-      onPress: () => handleSelect(item.number),
-      style: ({
-        pressed
-      }) => [tokens.layout.item, item.active && {
-        backgroundColor: tokens.colors.activeBackground
-      }, pressed && !item.active && {
-        opacity: tokens.defaults.pressedOpacity
-      }],
-      testID: `rv-pagination-page-${index}`
-    }, isText(node) ? /*#__PURE__*/React.createElement(Text, {
-      style: {
-        color: textColor,
-        fontWeight: item.active ? tokens.typography.activeFontWeight : tokens.typography.fontWeight
-      }
-    }, node) : node);
-  };
-  const renderControl = type => {
-    const disabled = type === 'prev' ? currentPage <= 1 : currentPage >= count;
-    const target = type === 'prev' ? currentPage - 1 : currentPage + 1;
-    const label = type === 'prev' ? prevText : nextText;
-    return /*#__PURE__*/React.createElement(Pressable, {
-      accessibilityRole: "button",
-      onPress: () => handleSelect(target),
-      disabled: disabled,
-      style: ({
-        pressed
-      }) => [tokens.layout.control, disabled && {
-        opacity: tokens.defaults.disabledOpacity
-      }, pressed && !disabled && {
-        opacity: tokens.defaults.pressedOpacity
-      }],
-      testID: `rv-pagination-${type}`
-    }, isText(label) ? /*#__PURE__*/React.createElement(Text, {
-      style: {
-        color: disabled ? tokens.colors.disabled : tokens.colors.text
-      }
-    }, label) : label);
-  };
-  const descNode = mode === 'multi' ? null : pageDesc ?? `${currentPage}/${count}`;
-  return /*#__PURE__*/React.createElement(View, _extends({
-    ref: ref,
-    style: [tokens.layout.container, style]
-  }, rest), renderControl('prev'), mode === 'multi' ? /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.pages
-  }, pages.map(renderPage)) : null, descNode == null ? null : isText(descNode) ? /*#__PURE__*/React.createElement(Text, {
-    style: tokens.layout.desc,
-    testID: "rv-pagination-desc"
-  }, descNode) : /*#__PURE__*/React.createElement(View, {
-    style: tokens.layout.desc,
-    testID: "rv-pagination-desc"
-  }, descNode), renderControl('next'));
-});
-Pagination.displayName = 'Pagination';
-export default Pagination;

package/dist/es/components/pagination/index.js

@@ -1,4 +0,0 @@
-import Pagination from './Pagination';
-export { usePaginationTokens } from './tokens';
-export default Pagination;
-export { Pagination };

package/dist/es/components/pagination/tokens.js

@@ -1,91 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { createComponentTokensHook } from '../../design-system';
-const createTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    radii
-  } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
-  const borderWidth = StyleSheet.hairlineWidth;
-  const borderColor = palette.default[200];
-  const textColor = palette.default[600];
-  const gap = spacing.xs;
-  const paddingX = spacing.sm;
-  const paddingY = spacing.xs;
-  const itemRadius = radii.sm;
-  return {
-    defaults: {
-      mode: 'multi',
-      pageCount: 0,
-      totalItems: 0,
-      itemsPerPage: 10,
-      showPageSize: 5,
-      forceEllipses: false,
-      prevText: '上一页',
-      nextText: '下一页',
-      defaultPage: 1,
-      pressedOpacity: 0.7,
-      disabledOpacity: 0.5
-    },
-    layout: {
-      container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap
-      },
-      pages: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap
-      },
-      item: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth,
-        paddingHorizontal: paddingX,
-        paddingVertical: paddingY,
-        borderColor,
-        borderRadius: itemRadius
-      },
-      control: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth,
-        paddingHorizontal: paddingX,
-        paddingVertical: paddingY,
-        borderColor,
-        borderRadius: itemRadius
-      },
-      desc: {
-        marginHorizontal: gap,
-        color: textColor,
-        textAlign: 'center'
-      }
-    },
-    colors: {
-      text: textColor,
-      disabled: palette.default[300],
-      activeText: onPrimary,
-      activeBackground: palette.primary[500],
-      border: borderColor
-    },
-    typography: {
-      fontWeight: '400',
-      activeFontWeight: '600'
-    },
-    radii: {
-      item: itemRadius
-    },
-    borders: {
-      width: borderWidth
-    },
-    spacing: {
-      gap,
-      paddingX,
-      paddingY,
-      descMarginHorizontal: gap
-    }
-  };
-};
-export const usePaginationTokens = createComponentTokensHook('pagination', createTokens);