react-native-system-ui 1.0.2 → 1.0.3

package/dist/es/components/form/FormItem.js

@@ -1,138 +1 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import { isFunction, isString } from '../../utils';
-import { FormContext } from './FormContext';
-import { FORM_ALL_FIELDS_KEY, normalizeTrigger, serializeNamePath } from './utils';
-const EMPTY_RULES = [];
-const EMPTY_VALUES = {};
-const FormItemImpl = ({
-  name,
-  label,
-  description,
-  intro,
-  tooltip,
-  rules,
-  dependencies,
-  valuePropName = 'value',
-  trigger = 'onChangeText',
-  validateTrigger,
-  showValidateMessage,
-  required,
-  shouldUpdate,
-  initialValue,
-  children
-}) => {
-  const renderProps = typeof children === 'function';
-  const ctx = useContext(FormContext);
-  const normRules = rules ?? EMPTY_RULES;
-  const nKey = name ? serializeNamePath(name) : undefined;
-  const shouldAlwaysUp = renderProps && !nKey && !shouldUpdate;
-  const prevValsRef = useRef(EMPTY_VALUES);
-  const [, forceUpdate] = useState(0);
-  useEffect(() => {
-    if (!ctx?.subscribe) return undefined;
-    return ctx.subscribe((ch, all) => {
-      if (FORM_ALL_FIELDS_KEY in ch) {
-        forceUpdate(v => v + 1);
-        return;
-      }
-      ;
-      if (shouldAlwaysUp) {
-        forceUpdate(v => v + 1);
-        return;
-      }
-      ;
-      if (shouldUpdate) {
-        if (shouldUpdate(prevValsRef.current, all)) forceUpdate(v => v + 1);
-        return;
-      }
-      ;
-      if (nKey && nKey in ch) forceUpdate(v => v + 1);
-    });
-  }, [ctx, nKey, shouldUpdate, shouldAlwaysUp]);
-  const curVals = ctx?.getFieldsValue() ?? EMPTY_VALUES;
-  useEffect(() => {
-    prevValsRef.current = curVals;
-  }, [curVals]);
-  useEffect(() => {
-    if (!name || !ctx) return undefined;
-    return ctx.registerField(name, {
-      rules: normRules,
-      dependencies,
-      initialValue,
-      validateTrigger: validateTrigger ?? trigger
-    });
-  }, [ctx, name, normRules, dependencies, initialValue, validateTrigger, trigger]);
-  if (!ctx) {
-    if (renderProps) return /*#__PURE__*/React.createElement(React.Fragment, null, children({
-      getFieldValue: () => undefined,
-      getFieldsValue: () => EMPTY_VALUES,
-      form: null
-    }));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-  }
-  ;
-  const shouldRender = !shouldUpdate || shouldUpdate(prevValsRef.current, curVals);
-  const modelVal = name ? ctx.getFieldValue(name) : undefined;
-  const rShowMsg = showValidateMessage ?? ctx.showValidateMessage ?? true;
-  const fieldErrs = name ? ctx.getFieldError(name) : undefined;
-  const fieldErr = rShowMsg ? fieldErrs?.[0] : undefined;
-  const rRequired = required ?? normRules.some(r => r.required);
-  const rValidateTrigger = normalizeTrigger(validateTrigger ?? trigger);
-  if (renderProps) {
-    if (!shouldRender) return null;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children({
-      getFieldValue: ctx.getFieldValue,
-      getFieldsValue: ctx.getFieldsValue,
-      form: ctx.form || null
-    }));
-  }
-  ;
-  if (!name) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-  if (!shouldRender) return null;
-  const chArr = React.Children.toArray(children);
-  if (chArr.length !== 1) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-  const child = chArr[0];
-  const handleChange = next => {
-    ctx.setFieldValue(name, next, trigger);
-    const orig = child.props[trigger];
-    if (isFunction(orig)) orig(next);
-  };
-  const dispName = child.type.displayName;
-  const isFieldLike = isString(dispName) && (dispName.includes('Field') || dispName.includes('Input'));
-  const rValue = () => {
-    const cv = child.props[valuePropName];
-    if (cv !== undefined) return cv;
-    if (modelVal !== undefined) return modelVal;
-    if (isFieldLike && valuePropName === 'value') return '';
-    return modelVal;
-  };
-  const injected = {
-    [valuePropName]: rValue(),
-    [trigger]: handleChange
-  };
-  rValidateTrigger.forEach(ev => {
-    if (!ev || ev === trigger) return;
-    const orig = child.props[ev];
-    injected[ev] = (...args) => {
-      if (isFunction(orig)) orig(...args);
-      ctx.validateField(name, ev);
-    };
-  });
-  const cp = child.props;
-  if (label !== undefined && cp.label === undefined) injected.label = label;
-  if (ctx.colon !== undefined && injected.label !== undefined && cp.colon === undefined) injected.colon = ctx.colon;
-  if (ctx.labelWidth !== undefined && cp.labelWidth === undefined) injected.labelWidth = ctx.labelWidth;
-  if (description && cp.description === undefined) injected.description = description;
-  if (intro && cp.intro === undefined) injected.intro = intro;
-  if (tooltip && cp.tooltip === undefined) injected.tooltip = tooltip;
-  if (rRequired && cp.required === undefined) injected.required = true;
-  if (fieldErr && cp.errorMessage === undefined) {
-    injected.error = true;
-    injected.errorMessage = fieldErr;
-  }
-  ;
-  return /*#__PURE__*/React.cloneElement(child, injected);
-};
-FormItemImpl.displayName = 'FormItem';
-export const FormItem = /*#__PURE__*/React.memo(FormItemImpl);
-export default FormItem;
+import React,{useContext,useEffect,useRef,useState}from"react";import{isFunction,isString}from"../../utils";import{FormContext}from"./FormContext";import{FORM_ALL_FIELDS_KEY,normalizeTrigger,serializeNamePath}from"./utils";const EMPTY_RULES=[],EMPTY_VALUES={},FormItemImpl=({name:e,label:t,description:r,intro:i,tooltip:l,rules:o,dependencies:n,valuePropName:a="value",trigger:s="onChangeText",validateTrigger:u,showValidateMessage:d,required:c,shouldUpdate:m,initialValue:F,children:g})=>{const p="function"==typeof g,f=useContext(FormContext),E=o??EMPTY_RULES,v=e?serializeNamePath(e):void 0,R=p&&!v&&!m,V=useRef(EMPTY_VALUES),[,h]=useState(0);useEffect(()=>{if(f?.subscribe)return f.subscribe((e,t)=>{FORM_ALL_FIELDS_KEY in e||R?h(e=>e+1):m?m(V.current,t)&&h(e=>e+1):v&&v in e&&h(e=>e+1)})},[f,v,m,R]);const b=f?.getFieldsValue()??EMPTY_VALUES;if(useEffect(()=>{V.current=b},[b]),useEffect(()=>{if(e&&f)return f.registerField(e,{rules:E,dependencies:n,initialValue:F,validateTrigger:u??s})},[f,e,E,n,F,u,s]),!f)return p?React.createElement(React.Fragment,null,g({getFieldValue:()=>{},getFieldsValue:()=>EMPTY_VALUES,form:null})):React.createElement(React.Fragment,null,g);const I=!m||m(V.current,b),L=e?f.getFieldValue(e):void 0,M=d??f.showValidateMessage??!0,S=e?f.getFieldError(e):void 0,_=M?S?.[0]:void 0,T=c??E.some(e=>e.required),P=normalizeTrigger(u??s);if(p)return I?React.createElement(React.Fragment,null,g({getFieldValue:f.getFieldValue,getFieldsValue:f.getFieldsValue,form:f.form||null})):null;if(!e)return React.createElement(React.Fragment,null,g);if(!I)return null;const x=React.Children.toArray(g);if(1!==x.length)return React.createElement(React.Fragment,null,g);const Y=x[0],A=Y.type.displayName,C=isString(A)&&(A.includes("Field")||A.includes("Input")),U={[a]:(()=>{const e=Y.props[a];return void 0!==e?e:void 0!==L?L:C&&"value"===a?"":L})(),[s]:t=>{f.setFieldValue(e,t,s);const r=Y.props[s];isFunction(r)&&r(t)}};P.forEach(t=>{if(!t||t===s)return;const r=Y.props[t];U[t]=(...i)=>{isFunction(r)&&r(...i),f.validateField(e,t)}});const y=Y.props;return void 0!==t&&void 0===y.label&&(U.label=t),void 0!==f.colon&&void 0!==U.label&&void 0===y.colon&&(U.colon=f.colon),void 0!==f.labelWidth&&void 0===y.labelWidth&&(U.labelWidth=f.labelWidth),r&&void 0===y.description&&(U.description=r),i&&void 0===y.intro&&(U.intro=i),l&&void 0===y.tooltip&&(U.tooltip=l),T&&void 0===y.required&&(U.required=!0),_&&void 0===y.errorMessage&&(U.error=!0,U.errorMessage=_),React.cloneElement(Y,U)};FormItemImpl.displayName="FormItem";export const FormItem=React.memo(FormItemImpl);export default FormItem;

package/dist/es/components/form/FormList.js

@@ -1,81 +1 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { FormContext } from './FormContext';
-import { FORM_ALL_FIELDS_KEY, getValueByName, serializeNamePath } from './utils';
-const getList = (context, name) => {
-  const raw = getValueByName(context.getFieldsValue(), name);
-  return Array.isArray(raw) ? raw : [];
-};
-export const FormList = ({
-  name,
-  initialValue,
-  children
-}) => {
-  const ctx = useContext(FormContext);
-  const keyCounterRef = useRef(0);
-  const keysRef = useRef([]);
-  const nKey = serializeNamePath(name);
-  const [listValue, setListValue] = useState(() => ctx ? getList(ctx, name) : []);
-  const syncKeys = useCallback(len => {
-    const k = keysRef.current;
-    while (k.length < len) k.push(keyCounterRef.current++);
-    if (k.length > len) keysRef.current = k.slice(0, len);
-  }, []);
-  const ensureInitial = useCallback(() => {
-    if (!ctx) return;
-    if (getValueByName(ctx.getFieldsValue(), name) === undefined && initialValue !== undefined) ctx.setFieldValue(name, initialValue);
-  }, [ctx, initialValue, name]);
-  useEffect(() => {
-    ensureInitial();
-  }, [ensureInitial]);
-  useEffect(() => {
-    if (!ctx?.subscribe) return undefined;
-    return ctx.subscribe((ch, all) => {
-      if (FORM_ALL_FIELDS_KEY in ch || nKey in ch) {
-        const next = getValueByName(all, name);
-        const nl = Array.isArray(next) ? next : [];
-        syncKeys(nl.length);
-        setListValue(nl);
-      }
-    });
-  }, [ctx, name, nKey, syncKeys]);
-  const add = useCallback((defaultValue, index) => {
-    if (!ctx) return;
-    const a = getList(ctx, name);
-    const i = typeof index === 'number' ? index : a.length;
-    const next = [...a];
-    next.splice(i, 0, defaultValue);
-    keysRef.current.splice(i, 0, keyCounterRef.current++);
-    ctx.setFieldValue(name, next);
-  }, [ctx, name]);
-  const remove = useCallback(index => {
-    if (!ctx) return;
-    const a = getList(ctx, name);
-    if (index < 0 || index >= a.length) return;
-    keysRef.current.splice(index, 1);
-    ctx.setFieldValue(name, a.slice(0, index).concat(a.slice(index + 1)));
-  }, [ctx, name]);
-  const move = useCallback((from, to) => {
-    if (!ctx) return;
-    const a = getList(ctx, name);
-    if (from === to || from < 0 || to < 0 || from >= a.length || to >= a.length) return;
-    const next = [...a];
-    const item = next.splice(from, 1)[0];
-    next.splice(to, 0, item);
-    const [movedKey] = keysRef.current.splice(from, 1);
-    keysRef.current.splice(to, 0, movedKey);
-    ctx.setFieldValue(name, next);
-  }, [ctx, name]);
-  if (!ctx) return null;
-  syncKeys(listValue.length);
-  const fields = listValue.map((_, i) => ({
-    name: i,
-    key: keysRef.current[i],
-    isListField: true
-  }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children(fields, {
-    add,
-    remove,
-    move
-  }));
-};
-FormList.displayName = 'Form.List';
+import React,{useCallback,useContext,useEffect,useRef,useState}from"react";import{FormContext}from"./FormContext";import{FORM_ALL_FIELDS_KEY,getValueByName,serializeNamePath}from"./utils";const getList=(e,t)=>{const r=getValueByName(e.getFieldsValue(),t);return Array.isArray(r)?r:[]};export const FormList=({name:e,initialValue:t,children:r})=>{const s=useContext(FormContext),l=useRef(0),i=useRef([]),n=serializeNamePath(e),[a,c]=useState(()=>s?getList(s,e):[]),u=useCallback(e=>{const t=i.current;for(;t.length<e;)t.push(l.current++);t.length>e&&(i.current=t.slice(0,e))},[]),o=useCallback(()=>{s&&void 0===getValueByName(s.getFieldsValue(),e)&&void 0!==t&&s.setFieldValue(e,t)},[s,t,e]);useEffect(()=>{o()},[o]),useEffect(()=>{if(s?.subscribe)return s.subscribe((t,r)=>{if(FORM_ALL_FIELDS_KEY in t||n in t){const t=getValueByName(r,e),s=Array.isArray(t)?t:[];u(s.length),c(s)}})},[s,e,n,u]);const m=useCallback((t,r)=>{if(!s)return;const n=getList(s,e),a="number"==typeof r?r:n.length,c=[...n];c.splice(a,0,t),i.current.splice(a,0,l.current++),s.setFieldValue(e,c)},[s,e]),f=useCallback(t=>{if(!s)return;const r=getList(s,e);t<0||t>=r.length||(i.current.splice(t,1),s.setFieldValue(e,r.slice(0,t).concat(r.slice(t+1))))},[s,e]),g=useCallback((t,r)=>{if(!s)return;const l=getList(s,e);if(t===r||t<0||r<0||t>=l.length||r>=l.length)return;const n=[...l],a=n.splice(t,1)[0];n.splice(r,0,a);const[c]=i.current.splice(t,1);i.current.splice(r,0,c),s.setFieldValue(e,n)},[s,e]);if(!s)return null;u(a.length);const F=a.map((e,t)=>({name:t,key:i.current[t],isListField:!0}));return React.createElement(React.Fragment,null,r(F,{add:m,remove:f,move:g}))};FormList.displayName="Form.List";

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

@@ -1,13 +1 @@
-import { useRef } from 'react';
-import InternalForm, { FormSubscribe, useWatch } from './Form';
-import { FormItem } from './FormItem';
-import { FormList } from './FormList';
-const Form = Object.assign(InternalForm, {
-  Item: FormItem,
-  List: FormList,
-  useForm: () => useRef(null),
-  Subscribe: FormSubscribe,
-  useWatch
-});
-export default Form;
-export { Form, FormItem, FormList, FormSubscribe, useWatch };
+import{useRef}from"react";import InternalForm,{FormSubscribe,useWatch}from"./Form";import{FormItem}from"./FormItem";import{FormList}from"./FormList";const Form=Object.assign(InternalForm,{Item:FormItem,List:FormList,useForm:()=>useRef(null),Subscribe:FormSubscribe,useWatch:useWatch});export default Form;export{Form,FormItem,FormList,FormSubscribe,useWatch};

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

@@ -1,8 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createFormTokens = _foundations => ({
-  defaults: {
-    showValidateMessage: true,
-    defaultValidationMessage: 'Validation failed'
-  }
-});
-export const useFormTokens = createComponentTokensHook('form', createFormTokens);
+import{createComponentTokensHook}from"../../design-system";const createFormTokens=e=>({defaults:{showValidateMessage:!0,defaultValidationMessage:"Validation failed"}});export const useFormTokens=createComponentTokensHook("form",createFormTokens);

package/dist/es/components/form/utils.js

@@ -1,45 +1 @@
-import { isNumber, isString } from '../../utils';
-export const normalizeTrigger = trigger => trigger ? Array.isArray(trigger) ? trigger : [trigger] : [];
-export const FORM_ALL_FIELDS_KEY = '__form_all__';
-export const toNamePath = name => {
-  if (name === undefined || name === null) return [];
-  if (Array.isArray(name)) return name;
-  if (isNumber(name)) return [name];
-  if (isString(name)) return name.split('.');
-  return [String(name)];
-};
-export const serializeNamePath = name => toNamePath(name).join('.');
-export const getValueByName = (source, name) => {
-  return toNamePath(name).reduce((acc, key) => {
-    if (acc == null) return acc;
-    const k = String(key);
-    if (Array.isArray(acc)) {
-      const i = Number(k);
-      return Number.isFinite(i) ? acc[i] : acc[k];
-    }
-    return typeof acc === 'object' ? acc[k] : undefined;
-  }, source);
-};
-export const setValueByName = (source, name, value) => {
-  const path = toNamePath(name);
-  if (!path.length) return source;
-  const clone = Array.isArray(source) ? [...source] : typeof source === 'object' && source !== null ? {
-    ...source
-  } : {};
-  let cursor = clone;
-  path.forEach((key, index) => {
-    const k = String(key),
-      ki = Number(k);
-    if (index === path.length - 1) {
-      if (Array.isArray(cursor) && Number.isFinite(ki)) cursor[ki] = value;else cursor[k] = value;
-      return;
-    }
-    const nv = Array.isArray(cursor) && Number.isFinite(ki) ? cursor[ki] : cursor[k];
-    const nc = nv === undefined || nv === null ? isNumber(path[index + 1]) ? [] : {} : Array.isArray(nv) ? [...nv] : typeof nv === 'object' ? {
-      ...nv
-    } : {};
-    if (Array.isArray(cursor) && Number.isFinite(ki)) cursor[ki] = nc;else cursor[k] = nc;
-    cursor = nc;
-  });
-  return clone;
-};
+import{isNumber,isString}from"../../utils";export const normalizeTrigger=r=>r?Array.isArray(r)?r:[r]:[];export const FORM_ALL_FIELDS_KEY="__form_all__";export const toNamePath=r=>null==r?[]:Array.isArray(r)?r:isNumber(r)?[r]:isString(r)?r.split("."):[String(r)];export const serializeNamePath=r=>toNamePath(r).join(".");export const getValueByName=(r,t)=>toNamePath(t).reduce((r,t)=>{if(null==r)return r;const e=String(t);if(Array.isArray(r)){const t=Number(e);return Number.isFinite(t)?r[t]:r[e]}return"object"==typeof r?r[e]:void 0},r);export const setValueByName=(r,t,e)=>{const i=toNamePath(t);if(!i.length)return r;const o=Array.isArray(r)?[...r]:"object"==typeof r&&null!==r?{...r}:{};let n=o;return i.forEach((r,t)=>{const o=String(r),a=Number(o);if(t===i.length-1)return void(Array.isArray(n)&&Number.isFinite(a)?n[a]=e:n[o]=e);const s=Array.isArray(n)&&Number.isFinite(a)?n[a]:n[o],u=null==s?isNumber(i[t+1])?[]:{}:Array.isArray(s)?[...s]:"object"==typeof s?{...s}:{};Array.isArray(n)&&Number.isFinite(a)?n[a]=u:n[o]=u,n=u}),o};

package/dist/es/components/grid/Grid.js

@@ -1,99 +1 @@
-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, { useMemo } from 'react';
-import { Platform, View } from 'react-native';
-import { createHairlineView } from '../../utils';
-import { useGridTokens } from './tokens';
-export const GridContext = /*#__PURE__*/React.createContext(null);
-const GridImpl = props => {
-  const {
-    tokensOverride,
-    children,
-    columnNum: colNumP,
-    gutter: gutP,
-    border: borderP,
-    center: centerP,
-    square: sqP,
-    direction: dirP,
-    reverse: revP,
-    clickable: clkP,
-    iconSize: iconSzP,
-    iconColor,
-    style,
-    ...rest
-  } = props;
-  const tokens = useGridTokens(tokensOverride);
-  const columnNum = useMemo(() => {
-    const v = colNumP ?? tokens.defaults.columnNum;
-    return Number.isFinite(v) && v > 0 ? Math.floor(v) : tokens.defaults.columnNum;
-  }, [colNumP, tokens.defaults.columnNum]);
-  const gutter = useMemo(() => {
-    const v = gutP ?? tokens.defaults.gutter;
-    return Number.isFinite(v) && v > 0 ? v : 0;
-  }, [gutP, tokens.defaults.gutter]);
-  const border = borderP ?? tokens.defaults.border;
-  const center = centerP ?? tokens.defaults.center;
-  const square = sqP ?? tokens.defaults.square;
-  const direction = dirP ?? tokens.defaults.direction;
-  const reverse = revP ?? tokens.defaults.reverse;
-  const clickable = clkP ?? tokens.defaults.clickable;
-  const iconSize = useMemo(() => {
-    const v = iconSzP ?? tokens.defaults.iconSize;
-    return Number.isFinite(v) && v > 0 ? v : tokens.defaults.iconSize;
-  }, [iconSzP, tokens.defaults.iconSize]);
-  const childrenArray = useMemo(() => React.Children.toArray(children).filter(c => /*#__PURE__*/React.isValidElement(c)), [children]);
-  const showBorder = border && !gutter;
-  const borderClr = tokens.colors.border;
-  const topBorder = useMemo(() => showBorder ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.border, tokens.layout.borderTop, createHairlineView({
-      position: 'top',
-      color: borderClr,
-      left: 0,
-      right: 0,
-      top: 0
-    })]
-  }) : null, [borderClr, showBorder, tokens.layout.border, tokens.layout.borderTop]);
-  const bottomBorder = useMemo(() => showBorder ? /*#__PURE__*/React.createElement(View, {
-    style: [tokens.layout.border, tokens.layout.borderBottom, createHairlineView({
-      position: 'bottom',
-      color: borderClr,
-      left: 0,
-      right: 0,
-      bottom: 0
-    })]
-  }) : null, [borderClr, showBorder, tokens.layout.border, tokens.layout.borderBottom]);
-  const ctxVal = useMemo(() => ({
-    columnNum,
-    gutter,
-    border,
-    center,
-    square,
-    direction,
-    reverse,
-    clickable,
-    iconSize,
-    iconColor,
-    count: childrenArray.length,
-    tokens
-  }), [border, center, childrenArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
-  const webGridStyle = useMemo(() => Platform.OS === 'web' ? {
-    display: 'grid',
-    gridTemplateColumns: `repeat(${columnNum}, minmax(0, 1fr))`,
-    columnGap: gutter,
-    rowGap: gutter
-  } : undefined, [columnNum, gutter]);
-  const ctrStyle = useMemo(() => [tokens.layout.container, Platform.OS === 'web' ? webGridStyle : gutter ? {
-    paddingLeft: gutter
-  } : undefined, style], [gutter, style, tokens.layout.container, webGridStyle]);
-  const rendered = useMemo(() => childrenArray.map((child, i) => /*#__PURE__*/React.cloneElement(child, {
-    gridItemIndex: i,
-    key: child.key ?? i
-  })), [childrenArray]);
-  return /*#__PURE__*/React.createElement(GridContext.Provider, {
-    value: ctxVal
-  }, /*#__PURE__*/React.createElement(View, _extends({
-    accessibilityRole: 'grid',
-    style: ctrStyle
-  }, rest), topBorder, rendered, bottomBorder));
-};
-export const Grid = /*#__PURE__*/React.memo(GridImpl);
-Grid.displayName = 'Grid';
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}import React,{useMemo}from"react";import{Platform,View}from"react-native";import{createHairlineView}from"../../utils";import{useGridTokens}from"./tokens";export const GridContext=React.createContext(null);const GridImpl=e=>{const{tokensOverride:t,children:r,columnNum:o,gutter:i,border:l,center:n,square:a,direction:u,reverse:s,clickable:c,iconSize:d,iconColor:m,style:f,...b}=e,p=useGridTokens(t),y=useMemo(()=>{const e=o??p.defaults.columnNum;return Number.isFinite(e)&&e>0?Math.floor(e):p.defaults.columnNum},[o,p.defaults.columnNum]),g=useMemo(()=>{const e=i??p.defaults.gutter;return Number.isFinite(e)&&e>0?e:0},[i,p.defaults.gutter]),v=l??p.defaults.border,M=n??p.defaults.center,w=a??p.defaults.square,x=u??p.defaults.direction,G=s??p.defaults.reverse,R=c??p.defaults.clickable,k=useMemo(()=>{const e=d??p.defaults.iconSize;return Number.isFinite(e)&&e>0?e:p.defaults.iconSize},[d,p.defaults.iconSize]),h=useMemo(()=>React.Children.toArray(r).filter(e=>React.isValidElement(e)),[r]),N=v&&!g,V=p.colors.border,C=useMemo(()=>N?React.createElement(View,{style:[p.layout.border,p.layout.borderTop,createHairlineView({position:"top",color:V,left:0,right:0,top:0})]}):null,[V,N,p.layout.border,p.layout.borderTop]),S=useMemo(()=>N?React.createElement(View,{style:[p.layout.border,p.layout.borderBottom,createHairlineView({position:"bottom",color:V,left:0,right:0,bottom:0})]}):null,[V,N,p.layout.border,p.layout.borderBottom]),E=useMemo(()=>({columnNum:y,gutter:g,border:v,center:M,square:w,direction:x,reverse:G,clickable:R,iconSize:k,iconColor:m,count:h.length,tokens:p}),[v,M,h.length,R,y,x,g,m,k,G,w,p]),O=useMemo(()=>"web"===Platform.OS?{display:"grid",gridTemplateColumns:`repeat(${y}, minmax(0, 1fr))`,columnGap:g,rowGap:g}:void 0,[y,g]),z=useMemo(()=>[p.layout.container,"web"===Platform.OS?O:g?{paddingLeft:g}:void 0,f],[g,f,p.layout.container,O]),P=useMemo(()=>h.map((e,t)=>React.cloneElement(e,{gridItemIndex:t,key:e.key??t})),[h]);return React.createElement(GridContext.Provider,{value:E},React.createElement(View,_extends({accessibilityRole:"grid",style:z},b),C,P,S))};export const Grid=React.memo(GridImpl);Grid.displayName="Grid";

package/dist/es/components/grid/GridContext.js

@@ -1 +1 @@
-export { GridContext } from './Grid';
+export{GridContext}from"./Grid";

package/dist/es/components/grid/GridItem.js

@@ -1,138 +1 @@
-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, { useContext, useMemo } from 'react';
-import { Platform, Pressable, View } from 'react-native';
-import { Text } from '../../design-system';
-import Badge from '../badge';
-import { createHairlineView, isFunction, isRenderable, isText, renderTextOrNode } from '../../utils';
-import { GridContext } from './GridContext';
-const GridItemImpl = p => {
-  const ctx = useContext(GridContext);
-  if (!ctx) throw new Error('GridItem must be used within Grid');
-  const {
-    gridItemIndex = 0,
-    text,
-    icon,
-    iconColor: icp,
-    badge,
-    dot,
-    contentStyle,
-    textStyle,
-    children,
-    style,
-    onPress,
-    ...rest
-  } = p;
-  const {
-    tokens: t,
-    columnNum: cn,
-    gutter: g,
-    border: b,
-    center: c,
-    square: sq,
-    direction: d,
-    reverse: r,
-    clickable: cl,
-    iconSize: is,
-    iconColor: ic,
-    count
-  } = ctx;
-  const wp = `${100 / cn}%`;
-  const ilc = (gridItemIndex + 1) % cn === 0;
-  const ri = Math.floor(gridItemIndex / cn);
-  const lri = Math.floor((count - 1) / cn);
-  const cws = [t.layout.itemContentBase, d === 'horizontal' ? t.layout.itemHorizontal : t.layout.itemVertical, c && t.layout.itemCenter, r ? d === 'horizontal' ? t.layout.itemReverseRow : t.layout.itemReverseColumn : null, sq ? t.layout.itemContentSquare : null, {
-    paddingHorizontal: t.spacing.paddingHorizontal,
-    paddingVertical: t.spacing.paddingVertical,
-    backgroundColor: t.colors.background
-  }, contentStyle];
-  const ht = isRenderable(text);
-  const ric = icp ?? ic ?? t.colors.text;
-  const icn = useMemo(() => {
-    if (children) return isText(children) ? renderTextOrNode(children, [t.layout.text, {
-      color: t.colors.text,
-      fontSize: t.typography.fontSize,
-      lineHeight: t.typography.lineHeight,
-      fontFamily: t.typography.fontFamily,
-      fontWeight: t.typography.fontWeight
-    }, textStyle]) : children;
-    let ie = null;
-    if (icon || badge || dot) {
-      const {
-        style: bws,
-        ...br
-      } = badge ?? {};
-      const mk = d === 'vertical' ? r ? 'marginTop' : 'marginBottom' : r ? 'marginLeft' : 'marginRight';
-      const iws = [t.layout.iconWrapper, ht && {
-        [mk]: t.spacing.iconGap
-      }];
-      const ino = isFunction(icon) ? icon(is, ric) : icon;
-      const cnt = /*#__PURE__*/React.createElement(View, {
-        style: iws
-      }, ino);
-      ie = badge || dot ? /*#__PURE__*/React.createElement(Badge, _extends({
-        dot: dot
-      }, br, {
-        style: c ? [bws, {
-          alignSelf: 'center'
-        }] : bws
-      }), cnt) : cnt;
-    }
-    const te = ht && (isText(text) ? /*#__PURE__*/React.createElement(Text, {
-      style: [t.layout.text, {
-        color: t.colors.text,
-        fontSize: t.typography.fontSize,
-        lineHeight: t.typography.lineHeight,
-        fontFamily: t.typography.fontFamily,
-        fontWeight: t.typography.fontWeight
-      }, textStyle],
-      numberOfLines: t.defaults.textNumberOfLines
-    }, text) : text);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, ie, te);
-  }, [badge, c, children, d, dot, ht, icon, is, ric, r, text, textStyle, t.colors.text, t.defaults.textNumberOfLines, t.layout.iconWrapper, t.layout.text, t.spacing.iconGap, t.typography.fontFamily, t.typography.fontSize, t.typography.fontWeight, t.typography.lineHeight]);
-  const rb = b && !g && !ilc ? /*#__PURE__*/React.createElement(View, {
-    style: [t.layout.itemBorderRight, createHairlineView({
-      position: 'right',
-      color: t.colors.border,
-      top: 0,
-      bottom: 0,
-      right: 0
-    })]
-  }) : null;
-  const bb = b && !g && ri < lri ? /*#__PURE__*/React.createElement(View, {
-    style: [t.layout.itemBorderBottom, createHairlineView({
-      position: 'bottom',
-      color: t.colors.border,
-      left: 0,
-      right: 0,
-      bottom: 0
-    })]
-  }) : null;
-  const cnt = /*#__PURE__*/React.createElement(View, {
-    style: cws
-  }, icn, rb, bb);
-  const bis = {
-    width: Platform.OS === 'web' ? undefined : wp,
-    flexGrow: 0,
-    flexShrink: 0,
-    paddingRight: Platform.OS === 'web' ? undefined : g ? g : undefined,
-    marginTop: Platform.OS === 'web' ? undefined : g && ri > 0 ? g : undefined
-  };
-  const ii = cl || isFunction(onPress);
-  if (ii) return /*#__PURE__*/React.createElement(Pressable, _extends({
-    accessibilityRole: "button",
-    style: ps => [bis, typeof style === 'function' ? style(ps) : style, {
-      opacity: ps.pressed ? t.defaults.pressedOpacity : 1
-    }],
-    android_ripple: {
-      color: t.colors.active
-    },
-    onPress: onPress
-  }, rest), cnt);
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: [bis, typeof style === 'function' ? style({
-      pressed: false
-    }) : style]
-  }, rest), cnt);
-};
-export const GridItem = /*#__PURE__*/React.memo(GridItemImpl);
-GridItem.displayName = 'GridItem';
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)({}).hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},_extends.apply(null,arguments)}import React,{useContext,useMemo}from"react";import{Platform,Pressable,View}from"react-native";import{Text}from"../../design-system";import Badge from"../badge";import{createHairlineView,isFunction,isRenderable,isText,renderTextOrNode}from"../../utils";import{GridContext}from"./GridContext";const GridItemImpl=e=>{const t=useContext(GridContext);if(!t)throw new Error("GridItem must be used within Grid");const{gridItemIndex:o=0,text:r,icon:i,iconColor:n,badge:a,dot:l,contentStyle:s,textStyle:c,children:m,style:d,onPress:p,...y}=e,{tokens:g,columnNum:u,gutter:f,border:h,center:x,square:b,direction:R,reverse:w,clickable:v,iconSize:S,iconColor:G,count:C}=t,O=100/u+"%",V=(o+1)%u===0,z=Math.floor(o/u),H=Math.floor((C-1)/u),E=[g.layout.itemContentBase,"horizontal"===R?g.layout.itemHorizontal:g.layout.itemVertical,x&&g.layout.itemCenter,w?"horizontal"===R?g.layout.itemReverseRow:g.layout.itemReverseColumn:null,b?g.layout.itemContentSquare:null,{paddingHorizontal:g.spacing.paddingHorizontal,paddingVertical:g.spacing.paddingVertical,backgroundColor:g.colors.background},s],I=isRenderable(r),F=n??G??g.colors.text,P=useMemo(()=>{if(m)return isText(m)?renderTextOrNode(m,[g.layout.text,{color:g.colors.text,fontSize:g.typography.fontSize,lineHeight:g.typography.lineHeight,fontFamily:g.typography.fontFamily,fontWeight:g.typography.fontWeight},c]):m;let e=null;if(i||a||l){const{style:t,...o}=a??{},r="vertical"===R?w?"marginTop":"marginBottom":w?"marginLeft":"marginRight",n=[g.layout.iconWrapper,I&&{[r]:g.spacing.iconGap}],s=isFunction(i)?i(S,F):i,c=React.createElement(View,{style:n},s);e=a||l?React.createElement(Badge,_extends({dot:l},o,{style:x?[t,{alignSelf:"center"}]:t}),c):c}const t=I&&(isText(r)?React.createElement(Text,{style:[g.layout.text,{color:g.colors.text,fontSize:g.typography.fontSize,lineHeight:g.typography.lineHeight,fontFamily:g.typography.fontFamily,fontWeight:g.typography.fontWeight},c],numberOfLines:g.defaults.textNumberOfLines},r):r);return React.createElement(React.Fragment,null,e,t)},[a,x,m,R,l,I,i,S,F,w,r,c,g.colors.text,g.defaults.textNumberOfLines,g.layout.iconWrapper,g.layout.text,g.spacing.iconGap,g.typography.fontFamily,g.typography.fontSize,g.typography.fontWeight,g.typography.lineHeight]),T=!h||f||V?null:React.createElement(View,{style:[g.layout.itemBorderRight,createHairlineView({position:"right",color:g.colors.border,top:0,bottom:0,right:0})]}),B=h&&!f&&z<H?React.createElement(View,{style:[g.layout.itemBorderBottom,createHairlineView({position:"bottom",color:g.colors.border,left:0,right:0,bottom:0})]}):null,W=React.createElement(View,{style:E},P,T,B),_={width:"web"===Platform.OS?void 0:O,flexGrow:0,flexShrink:0,paddingRight:"web"===Platform.OS?void 0:f||void 0,marginTop:"web"===Platform.OS?void 0:f&&z>0?f:void 0};return v||isFunction(p)?React.createElement(Pressable,_extends({accessibilityRole:"button",style:e=>[_,"function"==typeof d?d(e):d,{opacity:e.pressed?g.defaults.pressedOpacity:1}],android_ripple:{color:g.colors.active},onPress:p},y),W):React.createElement(View,_extends({style:[_,"function"==typeof d?d({pressed:!1}):d]},y),W)};export const GridItem=React.memo(GridItemImpl);GridItem.displayName="GridItem";

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

@@ -1,6 +1 @@
-import { Grid } from './Grid';
-import { GridItem } from './GridItem';
-export const GridComponent = Object.assign(Grid, {
-  Item: GridItem
-});
-export default GridComponent;
+import{Grid}from"./Grid";import{GridItem}from"./GridItem";export const GridComponent=Object.assign(Grid,{Item:GridItem});export default GridComponent;

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

@@ -1,98 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-export const createGridTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    fontSize,
-    typography,
-    opacity
-  } = foundations;
-  return {
-    defaults: {
-      columnNum: 4,
-      gutter: 0,
-      border: true,
-      center: true,
-      square: false,
-      direction: 'vertical',
-      reverse: false,
-      clickable: false,
-      iconSize: 28,
-      pressedOpacity: opacity.pressed,
-      textNumberOfLines: 2
-    },
-    layout: {
-      container: {
-        flexDirection: 'row',
-        flexWrap: 'wrap'
-      },
-      border: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        height: 1,
-        zIndex: 1
-      },
-      borderTop: {
-        top: 0
-      },
-      borderBottom: {
-        bottom: 0
-      },
-      itemContentBase: {
-        justifyContent: 'center'
-      },
-      itemVertical: {
-        flexDirection: 'column'
-      },
-      itemHorizontal: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      },
-      itemCenter: {
-        alignItems: 'center'
-      },
-      itemReverseColumn: {
-        flexDirection: 'column-reverse'
-      },
-      itemReverseRow: {
-        flexDirection: 'row-reverse'
-      },
-      iconWrapper: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
-      text: {
-        textAlign: 'center'
-      },
-      itemBorderRight: {
-        width: 1
-      },
-      itemBorderBottom: {
-        height: 1
-      },
-      itemContentSquare: {
-        width: '100%',
-        aspectRatio: 1
-      }
-    },
-    colors: {
-      border: palette.default[200],
-      text: palette.default[600],
-      background: '#ffffff',
-      active: palette.default[100]
-    },
-    typography: {
-      fontSize: fontSize.sm,
-      fontFamily: typography.fontFamily,
-      lineHeight: Math.round(fontSize.sm * typography.lineHeightMultiplier),
-      fontWeight: typography.weight.regular
-    },
-    spacing: {
-      paddingHorizontal: spacing.sm,
-      paddingVertical: spacing.md,
-      iconGap: spacing.sm
-    }
-  };
-};
-export const useGridTokens = createComponentTokensHook('grid', createGridTokens);
+import{createComponentTokensHook}from"../../design-system";export const createGridTokens=e=>{const{palette:t,spacing:o,fontSize:r,typography:i,opacity:n}=e;return{defaults:{columnNum:4,gutter:0,border:!0,center:!0,square:!1,direction:"vertical",reverse:!1,clickable:!1,iconSize:28,pressedOpacity:n.pressed,textNumberOfLines:2},layout:{container:{flexDirection:"row",flexWrap:"wrap"},border:{position:"absolute",left:0,right:0,height:1,zIndex:1},borderTop:{top:0},borderBottom:{bottom:0},itemContentBase:{justifyContent:"center"},itemVertical:{flexDirection:"column"},itemHorizontal:{flexDirection:"row",alignItems:"center"},itemCenter:{alignItems:"center"},itemReverseColumn:{flexDirection:"column-reverse"},itemReverseRow:{flexDirection:"row-reverse"},iconWrapper:{alignItems:"center",justifyContent:"center"},text:{textAlign:"center"},itemBorderRight:{width:1},itemBorderBottom:{height:1},itemContentSquare:{width:"100%",aspectRatio:1}},colors:{border:t.default[200],text:t.default[600],background:"#ffffff",active:t.default[100]},typography:{fontSize:r.sm,fontFamily:i.fontFamily,lineHeight:Math.round(r.sm*i.lineHeightMultiplier),fontWeight:i.weight.regular},spacing:{paddingHorizontal:o.sm,paddingVertical:o.md,iconGap:o.sm}}};export const useGridTokens=createComponentTokensHook("grid",createGridTokens);