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

package/dist/es/collapse/Collapse.js

@@ -0,0 +1,304 @@
+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, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Text, View } from 'react-native';
+import { Arrow } from 'react-native-system-icon';
+import { Cell } from '../cell';
+import { createHairlineView, isFunction, isNumber, isObject, isRenderable, isText } from '../../utils';
+import { useCollapseTokens } from './tokens';
+const CollapseContext = /*#__PURE__*/React.createContext(null);
+const normalizeValue = value => {
+  if (value === undefined) return undefined;
+  if (Array.isArray(value)) return value.map(String);
+  if (value === null) return [];
+  return [String(value)];
+};
+const buildOutputValue = (keys, accordion) => {
+  if (accordion) {
+    return keys[0] ?? '';
+  }
+  return keys;
+};
+export const Collapse = props => {
+  const {
+    tokensOverride,
+    children,
+    accordion: accordionProp,
+    value,
+    defaultValue,
+    onChange,
+    border: borderProp,
+    iconPosition: iconPositionProp,
+    expandIcon,
+    disabled,
+    style,
+    ...rest
+  } = props;
+  const tokens = useCollapseTokens(tokensOverride);
+  const accordion = accordionProp ?? tokens.defaults.accordion;
+  const border = borderProp ?? tokens.defaults.border;
+  const iconPosition = iconPositionProp ?? tokens.defaults.iconPosition;
+  const {
+    colors
+  } = tokens;
+  const controlled = value !== undefined;
+  const normalizedValue = normalizeValue(value);
+  const normalizedDefault = normalizeValue(defaultValue) ?? [];
+  const [internalValue, setInternalValue] = useState(() => accordion ? normalizedDefault.slice(0, 1) : normalizedDefault);
+  const activeKeys = controlled ? accordion ? (normalizedValue ?? []).slice(0, 1) : normalizedValue ?? [] : internalValue;
+  const toggle = useCallback((name, expand) => {
+    if (disabled) return;
+    const current = activeKeys;
+    const exists = current.includes(name);
+    let next;
+    if (accordion) {
+      if (expand === true) {
+        next = exists ? current : [name];
+      } else if (expand === false) {
+        next = exists ? [] : current;
+      } else {
+        next = exists ? [] : [name];
+      }
+    } else {
+      if (expand === true) {
+        next = exists ? current : [...current, name];
+      } else if (expand === false) {
+        next = exists ? current.filter(item => item !== name) : current;
+      } else {
+        next = exists ? current.filter(item => item !== name) : [...current, name];
+      }
+    }
+    if (!controlled) {
+      setInternalValue(next);
+    }
+    onChange?.(buildOutputValue(next, accordion));
+  }, [accordion, activeKeys, controlled, disabled, onChange]);
+  const contextValue = useMemo(() => ({
+    activeKeys,
+    toggle,
+    accordion,
+    iconPosition,
+    expandIcon,
+    border,
+    disabled,
+    tokens
+  }), [accordion, activeKeys, border, disabled, expandIcon, iconPosition, tokens, toggle]);
+  const renderedChildren = useMemo(() => {
+    const items = React.Children.toArray(children);
+    return items.map((child, index) => {
+      if (! /*#__PURE__*/React.isValidElement(child)) return child;
+      if (!isFunction(child.type) && !isObject(child.type)) {
+        return child;
+      }
+      const name = child.props.name ?? String(index);
+      return /*#__PURE__*/React.cloneElement(child, {
+        name,
+        index
+      });
+    });
+  }, [children]);
+  return /*#__PURE__*/React.createElement(CollapseContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(View, _extends({
+    style: [tokens.layout.container, border && {
+      backgroundColor: colors.background
+    }, style]
+  }, rest), border && /*#__PURE__*/React.createElement(Hairline, {
+    tokens: tokens,
+    position: "top",
+    color: colors.border
+  }), border && /*#__PURE__*/React.createElement(Hairline, {
+    tokens: tokens,
+    position: "bottom",
+    color: colors.border
+  }), renderedChildren));
+};
+const Hairline = ({
+  tokens,
+  position,
+  color,
+  inset = 0
+}) => {
+  const hairlineStyle = createHairlineView({
+    position,
+    color,
+    left: inset,
+    right: inset
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none",
+    style: [tokens.layout.hairline, hairlineStyle]
+  });
+};
+const CollapsePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const context = useContext(CollapseContext);
+  if (!context) {
+    throw new Error('Collapse.Panel must be used within Collapse');
+  }
+  const {
+    activeKeys,
+    toggle,
+    iconPosition,
+    expandIcon,
+    disabled: collapseDisabled,
+    tokens
+  } = context;
+  const {
+    name = '0',
+    index = 0,
+    title,
+    description,
+    label,
+    icon,
+    extra,
+    value,
+    border: panelBorder = tokens.defaults.panelBorder,
+    isLink = tokens.defaults.panelIsLink,
+    size = tokens.defaults.panelSize,
+    disabled,
+    readOnly,
+    children,
+    style,
+    titleStyle,
+    descriptionStyle,
+    ...rest
+  } = props;
+  const nameKey = String(name);
+  const isActive = activeKeys.includes(nameKey);
+  const mergedDisabled = collapseDisabled || disabled;
+  const {
+    colors,
+    spacing,
+    typography
+  } = tokens;
+  const [contentHeight, setContentHeight] = useState(0);
+  const animation = useRef(new Animated.Value(isActive ? 1 : 0)).current;
+  const rotate = useMemo(() => animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['90deg', '-90deg']
+  }), [animation]);
+  useEffect(() => {
+    Animated.timing(animation, {
+      toValue: isActive ? 1 : 0,
+      duration: tokens.defaults.animationDuration,
+      easing: Easing.ease,
+      useNativeDriver: false
+    }).start();
+  }, [animation, isActive, tokens.defaults.animationDuration]);
+  const resolvedLabel = description ?? label;
+  const resolvedValue = extra ?? value;
+  const handleToggle = useCallback(() => {
+    if (mergedDisabled || readOnly) return;
+    toggle(nameKey);
+  }, [mergedDisabled, nameKey, readOnly, toggle]);
+  useImperativeHandle(ref, () => ({
+    toggle: expand => {
+      if (mergedDisabled || readOnly) return;
+      toggle(nameKey, expand);
+    }
+  }), [mergedDisabled, nameKey, readOnly, toggle]);
+  const handleContentLayout = event => {
+    const nextHeight = event.nativeEvent.layout.height;
+    if (isNumber(nextHeight) && Number.isFinite(nextHeight) && nextHeight !== contentHeight) {
+      setContentHeight(nextHeight);
+    }
+  };
+  const animatedStyle = {
+    height: animation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, contentHeight]
+    })
+  };
+  const renderExpandIcon = useCallback(() => {
+    if (isFunction(expandIcon)) {
+      return expandIcon(isActive);
+    }
+    if (expandIcon) {
+      return expandIcon;
+    }
+    return /*#__PURE__*/React.createElement(Animated.View, {
+      style: {
+        transform: [{
+          rotate
+        }]
+      }
+    }, /*#__PURE__*/React.createElement(Arrow, {
+      size: 16,
+      fill: mergedDisabled ? colors.disabled : colors.arrow
+    }));
+  }, [colors.arrow, colors.disabled, expandIcon, isActive, mergedDisabled, rotate]);
+  const contentNode = useMemo(() => {
+    if (!isText(children)) return children;
+    return /*#__PURE__*/React.createElement(Text, {
+      style: {
+        color: mergedDisabled ? colors.disabled : colors.description,
+        fontSize: typography.descriptionSize,
+        lineHeight: Math.round(typography.descriptionSize * 1.5)
+      }
+    }, children);
+  }, [children, colors.description, colors.disabled, mergedDisabled, typography.descriptionSize]);
+  const showItemBorder = Boolean(panelBorder);
+  const showTopBorder = index > 0 && showItemBorder;
+  const showHeaderBottomBorder = isActive && showItemBorder;
+  const showExpandIcon = isLink && !readOnly;
+  const headerIcon = iconPosition === 'left' ? showExpandIcon || isRenderable(icon) ? /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.headerIconRow
+  }, showExpandIcon ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginRight: icon ? tokens.spacing.iconGap : 0
+    }
+  }, renderExpandIcon()) : null, icon) : undefined : icon;
+  const headerRightIcon = iconPosition === 'right' && showExpandIcon ? renderExpandIcon() : undefined;
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [tokens.layout.panel, {
+      backgroundColor: colors.background
+    }, style]
+  }, rest), showTopBorder ? /*#__PURE__*/React.createElement(Hairline, {
+    tokens: tokens,
+    position: "top",
+    color: colors.border,
+    inset: spacing.paddingHorizontal
+  }) : null, /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.headerWrapper
+  }, /*#__PURE__*/React.createElement(Cell, {
+    title: title,
+    label: resolvedLabel,
+    icon: headerIcon,
+    value: resolvedValue,
+    size: size,
+    border: false,
+    disabled: mergedDisabled,
+    onPress: readOnly ? undefined : handleToggle,
+    accessibilityState: {
+      expanded: isActive,
+      disabled: mergedDisabled
+    },
+    titleStyle: mergedDisabled ? [titleStyle, {
+      color: colors.disabled
+    }] : titleStyle,
+    labelStyle: mergedDisabled ? [descriptionStyle, {
+      color: colors.disabled
+    }] : descriptionStyle,
+    valueStyle: mergedDisabled ? {
+      color: colors.disabled
+    } : undefined,
+    rightIcon: headerRightIcon
+  }), showHeaderBottomBorder ? /*#__PURE__*/React.createElement(Hairline, {
+    tokens: tokens,
+    position: "bottom",
+    color: colors.border,
+    inset: spacing.paddingHorizontal
+  }) : null), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [tokens.layout.bodyWrapper, animatedStyle]
+  }, /*#__PURE__*/React.createElement(View, {
+    onLayout: handleContentLayout,
+    style: [tokens.layout.bodyContent, {
+      paddingVertical: spacing.paddingVertical,
+      paddingHorizontal: spacing.paddingHorizontal,
+      backgroundColor: colors.background
+    }]
+  }, contentNode)));
+});
+Collapse.Panel = CollapsePanel;
+Collapse.Item = CollapsePanel;
+Collapse.displayName = 'Collapse';
+export default Collapse;

package/dist/es/collapse/index.js

@@ -0,0 +1,2 @@
+import { Collapse } from './Collapse';
+export default Collapse;

package/dist/es/collapse/tokens.js

@@ -0,0 +1,74 @@
+import { createComponentTokensHook } from '../../design-system';
+export const createCollapseTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    fontSize,
+    typography,
+    radii
+  } = foundations;
+  return {
+    defaults: {
+      accordion: false,
+      border: true,
+      iconPosition: 'right',
+      panelBorder: true,
+      panelIsLink: true,
+      panelSize: 'normal',
+      animationDuration: 200
+    },
+    layout: {
+      container: {
+        position: 'relative'
+      },
+      panel: {
+        position: 'relative'
+      },
+      hairline: {
+        position: 'absolute'
+      },
+      headerWrapper: {
+        position: 'relative'
+      },
+      bodyWrapper: {
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      headerIconRow: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      bodyContent: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0
+      }
+    },
+    colors: {
+      border: palette.default[200],
+      title: palette.default[800],
+      description: palette.default[500],
+      background: '#ffffff',
+      active: palette.default[50],
+      arrow: palette.default[400],
+      disabled: palette.default[400]
+    },
+    typography: {
+      titleSize: fontSize.md,
+      descriptionSize: fontSize.sm,
+      fontFamily: typography.fontFamily,
+      titleWeight: typography.weight.medium
+    },
+    panel: {
+      borderRadius: radii.sm
+    },
+    spacing: {
+      paddingVertical: spacing.md,
+      paddingHorizontal: spacing.lg,
+      descriptionTop: spacing.xs,
+      iconGap: 8
+    }
+  };
+};
+export const useCollapseTokens = createComponentTokensHook('collapse', createCollapseTokens);

package/dist/es/config-provider/ConfigProvider.js

@@ -0,0 +1,18 @@
+import React, { useContext, useMemo } from 'react';
+import { ThemeProvider } from '../../design-system/ThemeProvider';
+import { PortalHost } from '../portal';
+import { LocaleContext } from './LocaleContext';
+const ConfigProviderBase = ({
+  theme,
+  locale,
+  children
+}) => {
+  const parentLocale = useContext(LocaleContext);
+  const resolvedLocale = useMemo(() => locale ?? parentLocale, [locale, parentLocale]);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement(LocaleContext.Provider, {
+    value: resolvedLocale
+  }, /*#__PURE__*/React.createElement(PortalHost, null, children)));
+};
+export const ConfigProvider = /*#__PURE__*/React.memo(ConfigProviderBase);

package/dist/es/config-provider/LocaleContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import { zhCN } from './locale/zh-CN';
+export const LocaleContext = /*#__PURE__*/React.createContext(zhCN);

package/dist/es/config-provider/index.js

@@ -0,0 +1,4 @@
+export { ConfigProvider } from './ConfigProvider';
+export { useLocale } from './useLocale';
+export { zhCN } from './locale/zh-CN';
+export { enUS } from './locale/en-US';

package/dist/es/config-provider/locale/base.js

@@ -0,0 +1,74 @@
+export const localeBase = {
+  name: '姓名',
+  tel: '电话',
+  save: '保存',
+  confirm: '确认',
+  cancel: '取消',
+  delete: '删除',
+  loading: '加载中...',
+  noCoupon: '暂无优惠券',
+  nameEmpty: '请填写姓名',
+  telInvalid: '请填写正确的电话',
+  vanCalendar: {
+    end: '结束',
+    start: '开始',
+    title: '日期选择',
+    confirm: '确定',
+    startEnd: '开始/结束',
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    monthTitle: (year, month) => `${year}年${month}月`,
+    rangePrompt: maxRange => `最多选择 ${maxRange} 天`
+  },
+  vanPicker: {
+    select: '请选择'
+  },
+  vanContactCard: {
+    addText: '添加联系人'
+  },
+  vanContactList: {
+    addText: '新建联系人'
+  },
+  vanPagination: {
+    prev: '上一页',
+    next: '下一页'
+  },
+  vanPullRefresh: {
+    pulling: '下拉即可刷新...',
+    loosing: '释放即可刷新...',
+    loading: '加载中...'
+  },
+  vanSubmitBar: {
+    label: '合计：'
+  },
+  vanCoupon: {
+    unlimited: '无使用门槛',
+    discount: discount => `${discount}折`,
+    condition: condition => `满${condition}元可用`
+  },
+  vanCouponCell: {
+    title: '优惠券',
+    count: count => `${count}张可用`
+  },
+  vanCouponList: {
+    exchange: '兑换',
+    close: '不使用优惠券',
+    enable: '可用',
+    disabled: '不可用',
+    placeholder: '请输入优惠码'
+  },
+  vanAddressEdit: {
+    area: '地区',
+    postal: '邮政编码',
+    areaEmpty: '请选择地区',
+    addressEmpty: '请填写详细地址',
+    postalEmpty: '邮政编码不正确',
+    defaultAddress: '设为默认收货地址'
+  },
+  vanAddressEditDetail: {
+    label: '详细地址',
+    placeholder: '街道门牌信息'
+  },
+  vanAddressList: {
+    add: '新增地址'
+  }
+};

package/dist/es/config-provider/locale/en-US.js

@@ -0,0 +1,12 @@
+import { localeBase } from './base';
+export const enUS = {
+  ...localeBase,
+  name: 'Name',
+  tel: 'Tel',
+  save: 'Save',
+  confirm: 'Confirm',
+  cancel: 'Cancel',
+  delete: 'Delete',
+  loading: 'Loading...',
+  noCoupon: 'No coupons'
+};

package/dist/es/config-provider/locale/zh-CN.js

@@ -0,0 +1,2 @@
+import { localeBase } from './base';
+export const zhCN = localeBase;

package/dist/es/config-provider/useLocale.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import { LocaleContext } from './LocaleContext';
+export const useLocale = () => useContext(LocaleContext);

package/dist/es/count-down/CountDown.js

@@ -0,0 +1,64 @@
+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, useImperativeHandle } from 'react';
+import { Text, View } from 'react-native';
+import { useCountDown } from '../../hooks';
+import { formatDuration, isFunction, isText } from '../../utils';
+import { useCountDownTokens } from './tokens';
+const CountDown = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    tokensOverride,
+    autoStart: autoStartProp,
+    millisecond: millisecondProp,
+    time: timeProp,
+    format: formatProp,
+    children,
+    onChange,
+    onFinish,
+    style,
+    ...rest
+  } = props;
+  const tokens = useCountDownTokens(tokensOverride);
+  const autoStart = autoStartProp ?? tokens.defaults.autoStart;
+  const millisecond = millisecondProp ?? tokens.defaults.millisecond;
+  const time = timeProp ?? tokens.defaults.time;
+  const format = formatProp ?? tokens.defaults.format;
+  const normalizedTime = Math.max(0, Number(time) || 0);
+  const {
+    start,
+    pause,
+    reset,
+    current
+  } = useCountDown({
+    time: normalizedTime,
+    millisecond,
+    onChange,
+    onFinish
+  });
+  const resetTime = () => {
+    reset(normalizedTime);
+    if (autoStart && normalizedTime > 0) {
+      start();
+    }
+  };
+  useEffect(() => {
+    resetTime();
+    return () => {
+      pause();
+    };
+  }, [autoStart, normalizedTime, pause, reset, start]);
+  useImperativeHandle(ref, () => ({
+    start,
+    pause,
+    reset: resetTime
+  }));
+  const defaultTextStyle = tokens.layout.text;
+  const content = isFunction(children) ? children(current) : formatDuration(format, current);
+  const contentNode = isText(content) ? /*#__PURE__*/React.createElement(Text, {
+    style: defaultTextStyle
+  }, content) : content;
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: style
+  }, rest), contentNode);
+});
+CountDown.displayName = 'CountDown';
+export default CountDown;

package/dist/es/count-down/index.js

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

package/dist/es/count-down/tokens.js

@@ -0,0 +1,27 @@
+import { createComponentTokensHook } from '../../design-system';
+export const createCountDownTokens = foundations => {
+  const {
+    palette,
+    fontSize,
+    typography
+  } = foundations;
+  const size = fontSize.sm;
+  return {
+    defaults: {
+      autoStart: true,
+      millisecond: false,
+      time: 0,
+      format: 'HH:mm:ss'
+    },
+    layout: {
+      text: {
+        color: palette.default[800],
+        fontSize: size,
+        lineHeight: 20,
+        fontFamily: typography.fontFamily,
+        fontWeight: typography.weight.regular
+      }
+    }
+  };
+};
+export const useCountDownTokens = createComponentTokensHook('countDown', createCountDownTokens);