@pisell/materials 6.0.7 → 6.0.8

package/es/components/pisellViewGrid/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.less';
+export interface PisellViewGridProps {
+    columns?: number;
+    horizontalGap?: number;
+    verticalGap?: number;
+    singleRow?: boolean;
+    dataSource?: any[];
+    renderItem?: (item: any, index: number) => React.ReactNode;
+    loading?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const PisellViewGrid: React.FC<PisellViewGridProps>;
+export default PisellViewGrid;

package/es/components/pisellViewGrid/index.js

@@ -0,0 +1,66 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React from 'react';
+import Loading from "../pisellLoading";
+import classNames from 'classnames';
+import "./index.less";
+var PisellViewGrid = function PisellViewGrid(_ref) {
+  var _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 3 : _ref$columns,
+    _ref$horizontalGap = _ref.horizontalGap,
+    horizontalGap = _ref$horizontalGap === void 0 ? 10 : _ref$horizontalGap,
+    _ref$verticalGap = _ref.verticalGap,
+    verticalGap = _ref$verticalGap === void 0 ? 10 : _ref$verticalGap,
+    _ref$singleRow = _ref.singleRow,
+    singleRow = _ref$singleRow === void 0 ? false : _ref$singleRow,
+    _ref$dataSource = _ref.dataSource,
+    dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+    renderItem = _ref.renderItem,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style;
+  var classes = classNames('pisell-view-grid', {
+    'pisell-view-grid-single-row': singleRow
+  }, className);
+  return /*#__PURE__*/React.createElement(Loading, {
+    loading: loading,
+    fullscreen: false,
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      width: '100%',
+      overflow: 'hidden'
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-view-grid-content",
+    style: !singleRow ? {
+      gap: "".concat(verticalGap, "px ").concat(horizontalGap, "px"),
+      gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
+      width: '100%'
+    } : {
+      display: 'flex',
+      flexWrap: 'nowrap',
+      overflowX: 'auto',
+      width: '100%'
+    }
+  }, dataSource.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "pisell-view-grid-item",
+      style: {
+        minWidth: 0,
+        flex: "0 0 calc(100% / ".concat(columns, ")")
+      }
+    }, renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index));
+  }))));
+};
+export default PisellViewGrid;

package/es/components/pisellViewGrid/index.less

@@ -0,0 +1,31 @@
+.pisell-view-grid {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  &-content {
+    display: grid;
+    width: 100%;
+    // grid-template-columns: repeat(4, 1fr);
+    // gap: 10px;
+  }
+
+  &-item {
+    width: 100%;
+  }
+
+  &-single-row {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  // &-item {
+  //   box-sizing: border-box;
+  //   display: inline-block;
+  //   vertical-align: top;
+  // }
+}

package/es/index.d.ts

@@ -131,6 +131,7 @@ export { default as DataSourceWrapper } from './components/dataSourceComponents/
 export { default as DataSourceTypography } from './components/dataSourceComponents/dataSourceShow/dataSourceTypography';
 export { default as DataSourceImage } from './components/dataSourceComponents/dataSourceShow/dataSourceImage';
 export { default as DataSourceQRCode } from './components/dataSourceComponents/dataSourceShow/dataSourceQRCode';
+export { default as PisellViewGrid } from './components/pisellViewGrid';
 export { default as PageHeader } from './components/page-header';
 export { default as OrganizationTenantSwitcher } from './components/organizationTenantSwitcher';
 export { default as PisellTags } from './components/pisellTags';

package/es/index.js

@@ -155,6 +155,7 @@ export { default as DataSourceWrapper } from "./components/dataSourceComponents/
 export { default as DataSourceTypography } from "./components/dataSourceComponents/dataSourceShow/dataSourceTypography";
 export { default as DataSourceImage } from "./components/dataSourceComponents/dataSourceShow/dataSourceImage";
 export { default as DataSourceQRCode } from "./components/dataSourceComponents/dataSourceShow/dataSourceQRCode";
+export { default as PisellViewGrid } from "./components/pisellViewGrid";
 export { default as PageHeader } from "./components/page-header";
 export { default as OrganizationTenantSwitcher } from "./components/organizationTenantSwitcher";
 export { default as PisellTags } from "./components/pisellTags";

package/lib/components/pisellViewGrid/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.less';
+export interface PisellViewGridProps {
+    columns?: number;
+    horizontalGap?: number;
+    verticalGap?: number;
+    singleRow?: boolean;
+    dataSource?: any[];
+    renderItem?: (item: any, index: number) => React.ReactNode;
+    loading?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const PisellViewGrid: React.FC<PisellViewGridProps>;
+export default PisellViewGrid;

package/lib/components/pisellViewGrid/index.js

@@ -0,0 +1,98 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellViewGrid/index.tsx
+var pisellViewGrid_exports = {};
+__export(pisellViewGrid_exports, {
+  default: () => pisellViewGrid_default
+});
+module.exports = __toCommonJS(pisellViewGrid_exports);
+var import_react = __toESM(require("react"));
+var import_pisellLoading = __toESM(require("../pisellLoading"));
+var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
+var PisellViewGrid = ({
+  columns = 3,
+  horizontalGap = 10,
+  verticalGap = 10,
+  singleRow = false,
+  dataSource = [],
+  renderItem,
+  loading = false,
+  children,
+  className,
+  style
+}) => {
+  const classes = (0, import_classnames.default)(
+    "pisell-view-grid",
+    {
+      "pisell-view-grid-single-row": singleRow
+    },
+    className
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_pisellLoading.default, { loading, fullscreen: false, style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: classes,
+      style: {
+        ...style,
+        width: "100%",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-view-grid-content",
+        style: !singleRow ? {
+          gap: `${verticalGap}px ${horizontalGap}px`,
+          gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          width: "100%"
+        } : {
+          display: "flex",
+          flexWrap: "nowrap",
+          overflowX: "auto",
+          width: "100%"
+        }
+      },
+      dataSource.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: index,
+          className: "pisell-view-grid-item",
+          style: {
+            minWidth: 0,
+            flex: `0 0 calc(100% / ${columns})`
+          }
+        },
+        renderItem == null ? void 0 : renderItem(item, index)
+      ))
+    )
+  ));
+};
+var pisellViewGrid_default = PisellViewGrid;

package/lib/components/pisellViewGrid/index.less

@@ -0,0 +1,31 @@
+.pisell-view-grid {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  &-content {
+    display: grid;
+    width: 100%;
+    // grid-template-columns: repeat(4, 1fr);
+    // gap: 10px;
+  }
+
+  &-item {
+    width: 100%;
+  }
+
+  &-single-row {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  // &-item {
+  //   box-sizing: border-box;
+  //   display: inline-block;
+  //   vertical-align: top;
+  // }
+}

package/lib/index.d.ts

@@ -131,6 +131,7 @@ export { default as DataSourceWrapper } from './components/dataSourceComponents/
 export { default as DataSourceTypography } from './components/dataSourceComponents/dataSourceShow/dataSourceTypography';
 export { default as DataSourceImage } from './components/dataSourceComponents/dataSourceShow/dataSourceImage';
 export { default as DataSourceQRCode } from './components/dataSourceComponents/dataSourceShow/dataSourceQRCode';
+export { default as PisellViewGrid } from './components/pisellViewGrid';
 export { default as PageHeader } from './components/page-header';
 export { default as OrganizationTenantSwitcher } from './components/organizationTenantSwitcher';
 export { default as PisellTags } from './components/pisellTags';

package/lib/index.js

@@ -122,6 +122,7 @@ __export(src_exports, {
   PisellToast: () => import_pisellToast.default,
   PisellTooltip: () => import_pisellTooltip.default,
   PisellUpload: () => import_pisellUpload.default,
+  PisellViewGrid: () => import_pisellViewGrid.default,
   PisellWalletPassCard: () => import_pisellWalletPassCard.default,
   Popconfirm: () => import_antd23.Popconfirm,
   Popover: () => import_antd24.Popover,
@@ -302,6 +303,7 @@ var import_dataSourceWrapper = __toESM(require("./components/dataSourceComponent
 var import_dataSourceTypography = __toESM(require("./components/dataSourceComponents/dataSourceShow/dataSourceTypography"));
 var import_dataSourceImage = __toESM(require("./components/dataSourceComponents/dataSourceShow/dataSourceImage"));
 var import_dataSourceQRCode = __toESM(require("./components/dataSourceComponents/dataSourceShow/dataSourceQRCode"));
+var import_pisellViewGrid = __toESM(require("./components/pisellViewGrid"));
 var import_page_header = __toESM(require("./components/page-header"));
 var import_organizationTenantSwitcher = __toESM(require("./components/organizationTenantSwitcher"));
 var import_pisellTags = __toESM(require("./components/pisellTags"));
@@ -401,6 +403,7 @@ var import_login_and_register = __toESM(require("./components/login-and-register
   PisellToast,
   PisellTooltip,
   PisellUpload,
+  PisellViewGrid,
   PisellWalletPassCard,
   Popconfirm,
   Popover,

package/lowcode/pisell-view-grid/meta.ts

@@ -0,0 +1,167 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "PisellViewGrid",
+  title: "栅格视图",
+  category: "数据展示",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "PisellViewGrid",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      title: '数据源',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'dataSource',
+          title: { label: '列表数据源', tip: 'dataSource | 列表数据源' },
+          propType: { type: 'arrayOf', value: 'any' },
+          setter: ['JsonSetter', 'VariableSetter'],
+        },
+        {
+          name: 'loading',
+          title: {
+            label: '是否加载中',
+            tip: 'loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位',
+          },
+          propType: 'bool',
+          defaultValue: false,
+          setter: ['BoolSetter', 'VariableSetter'],
+        },
+        {
+          name: 'rowKey',
+          title: {
+            label: '行Key',
+            tip: 'rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式',
+          },
+          propType: {
+            type: 'oneOfType',
+            value: ['string', 'function'],
+          },
+          defaultValue: 'id',
+          setter: [
+            'StringSetter',
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'rowKey(item,${extParams}){\n// 自定义每一行的 key\nreturn `key-${item.id}`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+    {
+      title: '栅格  ',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'columns',
+          title: { label: '列数', tip: 'columns | 列数' },
+          propType: 'number',
+          setter: 'NumberSetter',
+          defaultValue: 3,
+        },
+        {
+          name: 'horizontalGap',
+          title: { label: '水平间隔', tip: 'horizontalGap | 栅格水平间隔，单位为像素(px)' },
+          propType: 'number',
+          setter: {
+            componentName: 'NumberSetter', props: {
+              min: 0,
+            },
+          },
+          defaultValue: 10,
+        },
+        {
+          name: 'verticalGap',
+          title: { label: '垂直间隔', tip: 'verticalGap | 栅格垂直间隔，单位为像素(px)' },
+          propType: 'number',
+          setter: {
+            componentName: 'NumberSetter',
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 10,
+        },
+        {
+          name: 'singleRow',
+          title: { label: '一行展示', tip: 'singleRow | 一行展示' },
+          propType: 'boolean',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+      ]
+    },
+    {
+      title: '扩展',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'renderItem',
+          title: {
+            label: '渲染函数',
+            tip: 'renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'SlotSetter',
+              title: '渲染函数插槽',
+              initialValue: {
+                type: 'JSSlot',
+                params: ['item'],
+                value: [
+                  {
+                    componentName: 'List.Item',
+                    props: {},
+                    children: {
+                      componentName: 'Typography.Text',
+                      props: {
+                        children: {
+                          type: 'JSExpression',
+                          value: 'this.item.text',
+                        },
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template: 'renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [],
+    },
+    component: {
+      isContainer: true,
+    },
+  },
+};

package/lowcode/pisell-view-grid/snippets.ts

@@ -0,0 +1,54 @@
+export default [
+  {
+    title: '栅格视图',
+    schema: {
+      componentName: 'PisellViewGrid',
+      props: {
+        dataSource: [
+          {
+            id: 1,
+            text: "Racing car sprays burning fuel into crowd.",
+          },
+          {
+            id: 2,
+            text: "Japanese princess to wed commoner.",
+          },
+          {
+            id: 3,
+            text: "Australian walks 100km after outback crash.",
+          },
+          {
+            id: 4,
+            text: "Man charged over missing wedding girl.",
+          },
+          {
+            id: 5,
+            text: "Los Angeles battles huge wildfires.",
+          },
+        ],
+        columns: 3,
+        horizontalGap: 10,
+        verticalGap: 10,
+        renderItem: {
+          type: "JSSlot",
+          params: ["item"],
+          value: [
+            {
+              componentName: "List.Item",
+              props: {},
+              children: {
+                componentName: "Typography.Text",
+                props: {
+                  children: {
+                    type: "JSExpression",
+                    value: "this.item.text",
+                  },
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "6.0.7",
+  "version": "6.0.8",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -65,9 +65,9 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "crypto-js": "^4.2.0",
     "@zxing/library": "0.21.2",
-    "@pisell/date-picker": "1.0.100",
+    "@pisell/utils": "1.0.42",
     "@pisell/icon": "0.0.11",
-    "@pisell/utils": "1.0.42"
+    "@pisell/date-picker": "1.0.100"
   },
   "peerDependencies": {
     "react": "^18.0.0",