amis 1.4.2-beta.6 → 1.5.0

package/lib/components/GridNav.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @file GridNav
+ * @description 金刚位宫格导航 参考react-vant
+ */
+import React from 'react';
+import { ClassNamesFn } from '../theme';
+import { BadgeProps } from './Badge';
+export declare type GridNavDirection = 'horizontal' | 'vertical';
+export interface GridNavProps {
+    /** 是否将格子固定为正方形	 */
+    square?: boolean;
+    /** 是否将格子内容居中显示	 */
+    center?: boolean;
+    /** 是否显示边框	 */
+    border?: boolean;
+    /** 格子之间的间距，默认单位为`px` */
+    gutter?: number;
+    /** 是否调换图标和文本的位置	 */
+    reverse?: boolean;
+    /** 图标占比，默认单位为`%` */
+    iconRatio?: number;
+    /** 格子内容排列的方向，可选值为 `horizontal`	 */
+    direction?: GridNavDirection;
+    /** 列数	 */
+    columnNum?: number;
+    className?: string;
+    itemClassName?: string;
+    classnames: ClassNamesFn;
+    style?: React.CSSProperties;
+}
+export interface GridNavItemProps {
+    /**  图标右上角徽标	 */
+    badge?: BadgeProps;
+    /** 文字 */
+    text?: string | React.ReactNode;
+    /** 图标名称或图片链接	 */
+    icon?: string | React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    contentClassName?: string;
+    contentStyle?: React.CSSProperties;
+    children?: React.ReactNode;
+    classnames: ClassNamesFn;
+    onClick?: (event: React.MouseEvent) => void;
+}
+declare type InternalProps = {
+    parent?: GridNavProps;
+    index?: number;
+};
+export declare const GridNavItem: React.FC<GridNavItemProps & InternalProps>;
+declare const GridNav: React.FC<GridNavProps>;
+export default GridNav;

package/lib/components/GridNav.js

@@ -0,0 +1,123 @@
+"use strict";
+/**
+ * @file GridNav
+ * @description 金刚位宫格导航 参考react-vant
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridNavItem = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var Badge_1 = require("./Badge");
+function addUnit(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    value = String(value);
+    return /^\d+(\.\d+)?$/.test(value) ? value + "px" : value;
+}
+var GridNavItem = function (_a) {
+    var _b;
+    var children = _a.children, cx = _a.classnames, className = _a.className, style = _a.style, props = (0, tslib_1.__rest)(_a, ["children", "classnames", "className", "style"]);
+    var _c = props.index, index = _c === void 0 ? 0 : _c, parent = props.parent;
+    if (!parent) {
+        if (process.env.NODE_ENV !== 'production') {
+            // eslint-disable-next-line no-console
+            console.error('[React Vant] <GridNavItem> must be a child component of <GridNav>.');
+        }
+        return null;
+    }
+    var rootStyle = (0, react_1.useMemo)(function () {
+        var square = parent.square, gutter = parent.gutter, _a = parent.columnNum, columnNum = _a === void 0 ? 4 : _a;
+        var percent = 100 / +columnNum + "%";
+        var internalStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, style), { flexBasis: percent });
+        if (square) {
+            internalStyle.paddingTop = percent;
+        }
+        else if (gutter) {
+            var gutterValue = addUnit(gutter);
+            internalStyle.paddingRight = gutterValue;
+            if (index >= columnNum) {
+                internalStyle.marginTop = gutterValue;
+            }
+        }
+        return internalStyle;
+    }, [parent.style, parent.gutter, parent.columnNum]);
+    var contentStyle = (0, react_1.useMemo)(function () {
+        var square = parent.square, gutter = parent.gutter;
+        if (square && gutter) {
+            var gutterValue = addUnit(gutter);
+            return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props.contentStyle), { right: gutterValue, bottom: gutterValue, height: 'auto' });
+        }
+        return props.contentStyle;
+    }, [parent.gutter, parent.columnNum, props.contentStyle]);
+    var renderIcon = function () {
+        var ratio = parent.iconRatio || 60;
+        if (typeof props.icon === 'string') {
+            if (props.badge) {
+                return (react_1.default.createElement(Badge_1.Badge, (0, tslib_1.__assign)({}, props.badge),
+                    react_1.default.createElement("div", { className: cx('GridNavItem-image') },
+                        react_1.default.createElement("img", { src: props.icon, style: { width: ratio + '%' } }))));
+            }
+            return (react_1.default.createElement("div", { className: cx('GridNavItem-image') },
+                react_1.default.createElement("img", { src: props.icon, style: { width: ratio + '%' } })));
+        }
+        if (react_1.default.isValidElement(props.icon)) {
+            return react_1.default.createElement(Badge_1.Badge, (0, tslib_1.__assign)({}, props.badge), props.icon);
+        }
+        return null;
+    };
+    var renderText = function () {
+        if (react_1.default.isValidElement(props.text)) {
+            return props.text;
+        }
+        if (props.text) {
+            return react_1.default.createElement("span", { className: cx('GridNavItem-text') }, props.text);
+        }
+        return null;
+    };
+    var renderContent = function () {
+        if (children) {
+            return children;
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            renderIcon(),
+            renderText()));
+    };
+    var center = parent.center, border = parent.border, square = parent.square, gutter = parent.gutter, reverse = parent.reverse, direction = parent.direction;
+    var prefix = 'GridNavItem-content';
+    var classes = cx(prefix + " " + (props.contentClassName || ''), (_b = {},
+        _b[prefix + "--" + direction] = !!direction,
+        _b[prefix + "--center"] = center,
+        _b[prefix + "--square"] = square,
+        _b[prefix + "--reverse"] = reverse,
+        _b[prefix + "--clickable"] = !!props.onClick,
+        _b[prefix + "--surround"] = border && gutter,
+        _b[prefix + "--border u-hairline"] = border,
+        _b));
+    return (react_1.default.createElement("div", { className: cx(className, { 'GridNavItem--square': square }), style: rootStyle },
+        react_1.default.createElement("div", { role: props.onClick ? 'button' : undefined, className: classes, style: contentStyle, onClick: props.onClick }, renderContent())));
+};
+exports.GridNavItem = GridNavItem;
+var GridNav = function (_a) {
+    var children = _a.children, className = _a.className, cx = _a.classnames, itemClassName = _a.itemClassName, style = _a.style, props = (0, tslib_1.__rest)(_a, ["children", "className", "classnames", "itemClassName", "style"]);
+    return (react_1.default.createElement("div", { style: (0, tslib_1.__assign)({ paddingLeft: addUnit(props.gutter) }, style), className: cx("GridNav " + (className || ''), {
+            'GridNav-top u-hairline': props.border && !props.gutter
+        }) }, react_1.default.Children.toArray(children)
+        .filter(Boolean)
+        .map(function (child, index) {
+        return react_1.default.cloneElement(child, {
+            index: index,
+            parent: props,
+            className: itemClassName,
+            classnames: cx
+        });
+    })));
+};
+GridNav.defaultProps = {
+    direction: 'vertical',
+    center: true,
+    border: true,
+    columnNum: 4
+};
+exports.default = GridNav;
+//# sourceMappingURL=./components/GridNav.js.map

package/lib/components/GridNav.js.map

@@ -0,0 +1,13 @@
+{
+    "version": 3,
+    "file": "GridNav.js",
+    "sourceRoot": "",
+    "sources": [
+        "/src/components/GridNav.tsx"
+    ],
+    "names": [],
+    "mappings": "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",
+    "sourcesContent": [
+        "/**\n * @file GridNav\n * @description 金刚位宫格导航 参考react-vant\n */\n\nimport React, {useMemo} from 'react';\nimport {ClassNamesFn} from '../theme';\nimport {Badge, BadgeProps} from './Badge';\n\nexport type GridNavDirection = 'horizontal' | 'vertical';\n\nexport interface GridNavProps {\n  /** 是否将格子固定为正方形\t */\n  square?: boolean;\n  /** 是否将格子内容居中显示\t */\n  center?: boolean;\n  /** 是否显示边框\t */\n  border?: boolean;\n  /** 格子之间的间距，默认单位为`px` */\n  gutter?: number;\n  /** 是否调换图标和文本的位置\t */\n  reverse?: boolean;\n  /** 图标占比，默认单位为`%` */\n  iconRatio?: number;\n  /** 格子内容排列的方向，可选值为 `horizontal`\t */\n  direction?: GridNavDirection;\n  /** 列数\t */\n  columnNum?: number;\n  className?: string;\n  itemClassName?: string;\n  classnames: ClassNamesFn;\n  style?: React.CSSProperties;\n}\n\nexport interface GridNavItemProps {\n  /**  图标右上角徽标\t */\n  badge?: BadgeProps;\n  /** 文字 */\n  text?: string | React.ReactNode;\n  /** 图标名称或图片链接\t */\n  icon?: string | React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  contentClassName?: string;\n  contentStyle?: React.CSSProperties;\n  children?: React.ReactNode;\n  classnames: ClassNamesFn;\n  onClick?: (event: React.MouseEvent) => void;\n}\n\ntype InternalProps = {\n  parent?: GridNavProps;\n  index?: number;\n};\n\nfunction addUnit(value?: string | number): string | undefined {\n  if (value === undefined || value === null) {\n    return undefined;\n  }\n  value = String(value);\n  return /^\\d+(\\.\\d+)?$/.test(value) ? `${value}px` : value;\n}\n\nexport const GridNavItem: React.FC<GridNavItemProps & InternalProps> = ({\n  children,\n  classnames: cx,\n  className,\n  style,\n  ...props\n}) => {\n  const {index = 0, parent} = props;\n  if (!parent) {\n    if (process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.error(\n        '[React Vant] <GridNavItem> must be a child component of <GridNav>.'\n      );\n    }\n    return null;\n  }\n\n  const rootStyle = useMemo(() => {\n    const {square, gutter, columnNum = 4} = parent;\n    const percent = `${100 / +columnNum}%`;\n    const internalStyle: React.CSSProperties = {\n      ...style,\n      flexBasis: percent\n    };\n\n    if (square) {\n      internalStyle.paddingTop = percent;\n    } else if (gutter) {\n      const gutterValue = addUnit(gutter);\n      internalStyle.paddingRight = gutterValue;\n\n      if (index >= columnNum) {\n        internalStyle.marginTop = gutterValue;\n      }\n    }\n\n    return internalStyle;\n  }, [parent.style, parent.gutter, parent.columnNum]);\n\n  const contentStyle = useMemo(() => {\n    const {square, gutter} = parent;\n\n    if (square && gutter) {\n      const gutterValue = addUnit(gutter);\n      return {\n        ...props.contentStyle,\n        right: gutterValue,\n        bottom: gutterValue,\n        height: 'auto'\n      };\n    }\n    return props.contentStyle;\n  }, [parent.gutter, parent.columnNum, props.contentStyle]);\n\n  const renderIcon = () => {\n    const ratio = parent.iconRatio || 60;\n    if (typeof props.icon === 'string') {\n      if (props.badge) {\n        return (\n          <Badge {...props.badge}>\n            <div className={cx('GridNavItem-image')}>\n              <img src={props.icon} style={{width: ratio + '%'}} />\n            </div>\n          </Badge>\n        );\n      }\n      return (\n        <div className={cx('GridNavItem-image')}>\n          <img src={props.icon} style={{width: ratio + '%'}} />\n        </div>\n      );\n    }\n\n    if (React.isValidElement(props.icon)) {\n      return <Badge {...(props.badge as BadgeProps)}>{props.icon}</Badge>;\n    }\n\n    return null;\n  };\n\n  const renderText = () => {\n    if (React.isValidElement(props.text)) {\n      return props.text;\n    }\n    if (props.text) {\n      return <span className={cx('GridNavItem-text')}>{props.text}</span>;\n    }\n    return null;\n  };\n\n  const renderContent = () => {\n    if (children) {\n      return children;\n    }\n    return (\n      <>\n        {renderIcon()}\n        {renderText()}\n      </>\n    );\n  };\n\n  const {center, border, square, gutter, reverse, direction} = parent;\n\n  const prefix = 'GridNavItem-content';\n  const classes = cx(`${prefix} ${props.contentClassName || ''}`, {\n    [`${prefix}--${direction}`]: !!direction,\n    [`${prefix}--center`]: center,\n    [`${prefix}--square`]: square,\n    [`${prefix}--reverse`]: reverse,\n    [`${prefix}--clickable`]: !!props.onClick,\n    [`${prefix}--surround`]: border && gutter,\n    [`${prefix}--border u-hairline`]: border\n  });\n\n  return (\n    <div\n      className={cx(className, {'GridNavItem--square': square})}\n      style={rootStyle}\n    >\n      <div\n        role={props.onClick ? 'button' : undefined}\n        className={classes}\n        style={contentStyle}\n        onClick={props.onClick}\n      >\n        {renderContent()}\n      </div>\n    </div>\n  );\n};\n\nconst GridNav: React.FC<GridNavProps> = ({\n  children,\n  className,\n  classnames: cx,\n  itemClassName,\n  style,\n  ...props\n}) => {\n  return (\n    <div\n      style={{paddingLeft: addUnit(props.gutter), ...style}}\n      className={cx(`GridNav ${className || ''}`, {\n        'GridNav-top u-hairline': props.border && !props.gutter\n      })}\n    >\n      {React.Children.toArray(children)\n        .filter(Boolean)\n        .map((child: React.ReactElement, index: number) =>\n          React.cloneElement(child, {\n            index,\n            parent: props,\n            className: itemClassName,\n            classnames: cx\n          })\n        )}\n    </div>\n  );\n};\n\nGridNav.defaultProps = {\n  direction: 'vertical',\n  center: true,\n  border: true,\n  columnNum: 4\n};\n\nexport default GridNav;\n"
+    ]
+}