@pisell/materials 1.0.491 → 1.0.493

package/es/components/browserSelect/index.js

@@ -45,11 +45,11 @@ var BrowserSelect = function BrowserSelect(props) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "browser-select-wrapper",
+    className: "pisell-browser-select-wrapper",
     style: _objectSpread({}, style)
   }, /*#__PURE__*/React.createElement("select", _extends({}, resetProps, {
     value: value,
-    className: classNames("date-picker-pisell-browser-select", resetProps.className),
+    className: classNames("pisell-date-picker-pisell-browser-select", resetProps.className),
     onChange: handleChange
   }), _options), /*#__PURE__*/React.createElement(DownOutlined, {
     className: "browser-select-icon"

package/es/components/browserSelect/index.less

@@ -1,62 +1,64 @@
-.browser-select-wrapper {
+.pisell-browser-select-wrapper {
   position: relative;
   width: 100%;
   display: inline-block;
-}
 
-.browser-select-icon {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #D0D5DD;
-  pointer-events: none;
-  font-size: 16px;
-}
+  .browser-select-icon {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #D0D5DD;
+    pointer-events: none;
+    font-size: 16px;
+  }
 
-.date-picker-pisell-browser-select {
-  padding: 10px 16px;
-  padding-right: 30px;
-  border-radius: 8px;
-  background-color: #fff;
-  color: var(--Gray-true-900, #141414);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  border: 1px solid var(--Gray-300, #D0D5DD);
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 100%;
+  .pisell-date-picker-pisell-browser-select {
+    padding: 10px 16px;
+    padding-right: 30px;
+    border-radius: 8px;
+    background-color: #fff;
+    color: var(--Gray-true-900, #141414);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 100%;
 
-  &:hover {
-    border-color: var(--theme-color, #7F56D9);
-    & + .browser-select-icon {
-      color: var(--theme-color, #7F56D9);
+    &:hover {
+      border-color: var(--theme-color, #7F56D9);
+      & + .browser-select-icon {
+        color: var(--theme-color, #7F56D9);
+      }
     }
-  }
 
-  &:focus {
-    border-color: var(--theme-color, #7F56D9);
-    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
-    outline: none;
-    & + .browser-select-icon {
-      color: var(--theme-color, #7F56D9);
+    &:focus {
+      border-color: var(--theme-color, #7F56D9);
+      box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+      outline: none;
+      & + .browser-select-icon {
+        color: var(--theme-color, #7F56D9);
+      }
     }
-  }
 
-  &:active {
-    border-color: var(--theme-color, #7F56D9);
-  }
+    &:active {
+      border-color: var(--theme-color, #7F56D9);
+    }
 
-  &:disabled {
-    background-color: rgba(0, 0, 0, 0.04);
-    border-color: #d9d9d9;
-    cursor: not-allowed;
-    color: rgba(0, 0, 0, 0.25);
-    & + .browser-select-icon {
+    &:disabled {
+      background-color: rgba(0, 0, 0, 0.04);
+      border-color: #d9d9d9;
+      cursor: not-allowed;
       color: rgba(0, 0, 0, 0.25);
+      & + .browser-select-icon {
+        color: rgba(0, 0, 0, 0.25);
+      }
     }
   }
+
 }
+

package/es/components/dataSourceComponents/dataSourceForm/index.js

@@ -11,10 +11,12 @@ import "./index.less";
  */
 var DataSourceForm = /*#__PURE__*/forwardRef(function (props, ref) {
   var dataSource = props.dataSource,
-    currentValue = props.currentValue;
+    currentValue = props.currentValue,
+    __designMode = props.__designMode;
   return /*#__PURE__*/React.createElement(DataSourceProvider, {
     dataSource: dataSource,
-    currentValue: currentValue
+    currentValue: currentValue,
+    __designMode: __designMode
   }, /*#__PURE__*/React.createElement(BaseForm, _extends({}, props, {
     ref: ref
   })));

package/es/components/dataSourceComponents/dataSourceForm/style.less

@@ -1,5 +1,14 @@
 .pisell-lowcode-form-vertical {
-    .pisell-data-source-form-item .pisell-lowcode-form-item-label>label {
-        height: auto;
-    }
+  .pisell-data-source-form-item .pisell-lowcode-form-item-label > label {
+    height: auto;
+  }
+}
+
+.pisell-form-read-pretty {
+  &-value {
+    color: var(--Gray-900, #101828);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px; /* 150% */
+  }
 }

package/es/components/dataSourceComponents/dataSourceForm/submitButton/index.d.ts

@@ -4,6 +4,7 @@ import './index.less';
 export interface SubmitButtonProps extends ButtonProps {
     status: 'normal' | 'disabled' | 'hidden';
     children: React.ReactNode;
+    childrenString?: string;
     confirmConfig?: {
         enable: boolean;
         title: string;

package/es/components/dataSourceComponents/dataSourceForm/submitButton/index.js

@@ -27,7 +27,10 @@ var SubmitButton = function SubmitButton(props) {
     refreshData = props.refreshData,
     afterSubmitType = props.afterSubmitType,
     afterSubmitModalConfig = props.afterSubmitModalConfig,
-    afterSubmitNotificationConfig = props.afterSubmitNotificationConfig;
+    afterSubmitNotificationConfig = props.afterSubmitNotificationConfig,
+    childrenString = props.childrenString;
+  console.log(props, 'propsprops');
+  console.log(childrenString, 'childrenchildren');
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loading = _useState2[0],
@@ -217,6 +220,6 @@ var SubmitButton = function SubmitButton(props) {
     loading: loading,
     onClick: onSubmitClick,
     disabled: isDisabled
-  }, children), contextHolder));
+  }, childrenString), contextHolder));
 };
 export default SubmitButton;

package/es/components/dataSourceComponents/dataSourceForm/type.d.ts

@@ -14,4 +14,5 @@ export interface DataSourceFormProps {
     children: React.ReactNode;
     className?: string;
     size?: 'small' | 'middle' | 'large';
+    __designMode?: string;
 }

package/es/components/dataSourceComponents/dataSourceForm/utils.js

@@ -18,7 +18,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useEffect, useMemo } from 'react';
 import { isArr, isString } from '@pisell/utils';
-import { Tag } from 'antd';
 import { parsePhoneNumberFromString, isValidPhoneNumber } from 'libphonenumber-js';
 import { getText } from "../../../locales";
 import Form from "../../form";
@@ -292,13 +291,20 @@ export var getNestedValue = function getNestedValue(obj, path) {
 // 根据valueMap渲染value 用于ReadPretty组件 Select Radio Checkbox
 export var renderValueWithMap = function renderValueWithMap(value, valueMap) {
   if (isArr(value)) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, value.map(function (item) {
-      return /*#__PURE__*/React.createElement(Tag, {
-        key: item
-      }, valueMap === null || valueMap === void 0 ? void 0 : valueMap[item]);
+    return /*#__PURE__*/React.createElement("span", {
+      className: "pisell-form-read-pretty-text"
+    }, value.map(function (item, index) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        key: item,
+        className: "pisell-form-read-pretty-value"
+      }, valueMap === null || valueMap === void 0 ? void 0 : valueMap[item]), index < value.length - 1 && ',');
     }));
   } else if (isString(value)) {
-    return /*#__PURE__*/React.createElement(Tag, null, (valueMap === null || valueMap === void 0 ? void 0 : valueMap[value]) || value);
+    return /*#__PURE__*/React.createElement("span", {
+      className: "pisell-form-read-pretty-text"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "pisell-form-read-pretty-value"
+    }, (valueMap === null || valueMap === void 0 ? void 0 : valueMap[value]) || value));
   }
   return null;
 };

package/es/components/dataSourceComponents/dataSourceTable/filter/utils.js

@@ -21,19 +21,20 @@ export var genGetField = function genGetField(dataSource) {
   };
 };
 var fieldType2FilterMap = {
-  Checkbox: 'Select',
-  ColorPicker: 'Input',
-  DatePicker: 'DateRangePicker',
-  Input: 'Input',
-  Radio: 'Select',
-  Select: 'Select',
-  Percent: 'Percent',
-  InputNumber: 'Input',
-  'Input.JSON': 'Input',
-  'Input.URL': 'Input',
-  'Input.Password': 'Input',
-  'Radio.Group': 'Select',
-  'Checkbox.Group': 'Select'
+  Checkbox: 'FormItemSelect',
+  ColorPicker: 'FormItemInput',
+  DatePicker: 'FormItemDateRangePicker',
+  Input: 'FormItemInput',
+  Radio: 'FormItemSelect',
+  Select: 'FormItemSelect',
+  Percent: 'FormItemPercent',
+  InputNumber: 'FormItemInputNumber',
+  'Input.JSON': 'FormItemInput',
+  'Input.Email': 'FormItemInput',
+  'Input.URL': 'FormItemInput',
+  'Input.Password': 'FormItemInput',
+  'Radio.Group': 'FormItemSelect',
+  'Checkbox.Group': 'FormItemSelect'
 };
 var getCptProps = function getCptProps(field, cptType, item) {
   var _field$uiSchema, _field$uiSchema2, _field$uiSchema3, _field$uiSchema3$enum, _field$uiSchema6, _field$uiSchema8;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts

@@ -16,7 +16,7 @@ interface UseTablePropsProps {
  * @returns
  */
 declare const useTableProps: (props: UseTablePropsProps) => {
-    title: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
+    title: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
     pagination: {
         total: number;
         current: number;
@@ -25,7 +25,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         showSizeChanger: boolean;
     };
     columns: import("./useColumns").Column[];
-    subTitle: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
+    subTitle: number | boolean | React.JSX.Element | Iterable<React.ReactNode> | (() => React.ReactNode) | null | undefined;
     buttons: any[] | null;
     filter: React.JSX.Element | null;
     onRow: (record: any) => any;
@@ -40,7 +40,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         width: number;
         align: "center" | "left" | "right";
         fixed: false | "left" | "right";
-        type: "button" | "link";
+        type: "link" | "button";
         items: OperationItem[];
     } | undefined;
     operationContent?: {

package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.js

@@ -103,11 +103,10 @@ var useTableProps = function useTableProps(props) {
                 return _regeneratorRuntime().wrap(function _callee$(_context) {
                   while (1) switch (_context.prev = _context.next) {
                     case 0:
-                      _context.next = 2;
-                      return destroy === null || destroy === void 0 ? void 0 : destroy.run(record.id);
-                    case 2:
-                      refreshData();
-                    case 3:
+                      destroy === null || destroy === void 0 ? void 0 : destroy.runAsync(record.id).then(function () {
+                        refreshData();
+                      });
+                    case 1:
                     case "end":
                       return _context.stop();
                   }

package/es/components/dataSourceComponents/dataSourceTable/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import "./index.less";
+import './index.less';
 import { DataSourceTableProps } from './type';
 declare const DataSourceTable: (props: DataSourceTableProps) => React.JSX.Element;
 export default DataSourceTable;

package/es/components/dataSourceComponents/dataSourceTable/index.js

@@ -3,9 +3,11 @@ import BaseTable from "./BaseTable";
 import DataSourceProvider from "../provider/dataSource/DataSourceProvider";
 import "./index.less";
 var DataSourceTable = function DataSourceTable(props) {
-  var dataSource = props.dataSource;
+  var dataSource = props.dataSource,
+    __designMode = props.__designMode;
   return /*#__PURE__*/React.createElement(DataSourceProvider, {
-    dataSource: dataSource
+    dataSource: dataSource,
+    __designMode: __designMode
   }, /*#__PURE__*/React.createElement(BaseTable, props));
 };
 export default DataSourceTable;

package/es/components/dataSourceComponents/dataSourceWrapper/index.js

@@ -9,13 +9,15 @@ var DataSourceWrapper = function DataSourceWrapper(props) {
     overrideData = props.overrideData,
     autoRun = props.autoRun,
     actions = props.actions,
-    currentValue = props.currentValue;
+    currentValue = props.currentValue,
+    __designMode = props.__designMode;
   return /*#__PURE__*/React.createElement(DataSourceProvider, {
     dataSource: dataSource,
     overrideData: overrideData,
     actions: actions,
     autoRun: autoRun,
-    currentValue: currentValue
+    currentValue: currentValue,
+    __designMode: __designMode
   }, /*#__PURE__*/React.createElement(BaseWrapper, props, children));
 };
 export default DataSourceWrapper;

package/es/components/dataSourceComponents/fields/Checkbox/ReadPretty.js

@@ -1,13 +1,15 @@
 import React from 'react';
-import { CheckOutlined } from '@ant-design/icons';
 import useValueMap from "../../hooks/useValueMap";
 import { renderValueWithMap } from "../../dataSourceForm/utils";
 import "./ReadPretty.less";
+import Iconfont from "../../../iconfont";
 var CheckboxReadPretty = function CheckboxReadPretty(props) {
   var value = props.value;
-  return value ? /*#__PURE__*/React.createElement(CheckOutlined, {
+  return value ? /*#__PURE__*/React.createElement(Iconfont, {
+    type: "pisell2-check",
     style: {
-      color: 'rgb(82, 196, 26)'
+      color: 'var(--theme-color)',
+      fontSize: 20
     }
   }) : null;
 };

package/es/components/dataSourceComponents/fields/ColorPicker/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const ColorPicker: React.FC<import("antd").ColorPickerProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps>;
+declare const ColorPicker: React.FC<import("./type").ColorPickerProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps>;
 export default ColorPicker;

package/es/components/dataSourceComponents/fields/Upload/BaseUpload.js

@@ -347,7 +347,11 @@ var BaseUpload = function BaseUpload(props) {
       });
     },
     listType: "picture-card",
-    fileList: fileList,
+    fileList: fileList
+    // itemRender={(originNode, file) => {
+    //   return <Image src={file.url} />
+    // }}
+    ,
     onChange: handleChange,
     action: mediaUploadUrl,
     method: "post",
@@ -377,7 +381,8 @@ var BaseUpload = function BaseUpload(props) {
       } : {});
     },
     headers: getHeaders === null || getHeaders === void 0 ? void 0 : getHeaders(),
-    beforeUpload: beforeUpload
+    beforeUpload: beforeUpload,
+    className: 'pisell-data-source-upload'
   }), fileList.length >= calcMaxCount ? null : uploadButton), previewImage && /*#__PURE__*/React.createElement(Image, {
     wrapperStyle: {
       display: 'none'

package/es/components/dataSourceComponents/fields/Upload/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { UploadProps } from './type';
-declare const UploadReadPretty: (props: UploadProps) => React.JSX.Element;
+import './ReadPretty.less';
+declare const UploadReadPretty: (props: UploadProps) => React.JSX.Element | null;
 export default UploadReadPretty;

package/es/components/dataSourceComponents/fields/Upload/ReadPretty.js

@@ -1,8 +1,17 @@
 import React from 'react';
 import { Image } from 'antd';
+import fallback from "./fallback.png";
+import "./ReadPretty.less";
 var UploadReadPretty = function UploadReadPretty(props) {
+  if (!props.value) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(Image, {
-    src: props.value
+    className: "pisell-upload-read-pretty",
+    src: props === null || props === void 0 ? void 0 : props.value,
+    width: 100,
+    height: 100,
+    fallback: fallback
   });
 };
 export default UploadReadPretty;

package/es/components/dataSourceComponents/fields/Upload/ReadPretty.less

@@ -0,0 +1,8 @@
+.pisell-upload-read-pretty {
+  display: flex;
+  width: 100px;
+  height: 100px;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid var(--Gray-300, #d0d5dd);
+}

package/es/components/dataSourceComponents/fields/Upload/index.less

@@ -11,3 +11,12 @@
   //   opacity: 0.4;
   // }
 }
+.pisell-data-source-upload {
+  .pisell-lowcode-upload-list-item-container {
+    .pisell-lowcode-upload-list-item-action {
+      &:hover {
+        background: none;
+      }
+    }
+  }
+}

package/es/components/dataSourceComponents/fields/index.d.ts

@@ -32,6 +32,7 @@ declare const formFieldMap: {
     FormItemPercent: import("react").FC<any>;
     FormItemTimePicker: import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     'FormItemInput.JSON': import("react").FC<any>;
+    'FormItemInput.Email': import("react").FC<import("antd").InputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     'FormItemInput.URL': import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     'FormItemInput.Password': import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     'FormItemRadio.Group': import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -43,7 +44,7 @@ declare const getFieldComponent: (fieldComponent: string) => import("react").FC<
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
-}) | import("react").FC<import("./ColorPicker/type").ColorPickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<(import("antd").DatePickerProps & import("../dataSourceForm/utils").WithModeProps) & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<import("./Input/type").InputProps> & {
+}) | import("react").FC<import("./ColorPicker/type").ColorPickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<(import("antd").DatePickerProps & import("../dataSourceForm/utils").WithModeProps) & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | (import("react").FC<import("./Input/type").InputProps> & {
     JSON: import("react").FC<any>;
     Password: import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     TextArea: import("react").FC<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;

package/es/components/dataSourceComponents/fields/index.js

@@ -21,6 +21,7 @@ var formFieldMap = {
   FormItemPercent: InputNumber,
   FormItemTimePicker: TimePicker,
   'FormItemInput.JSON': Input.JSON,
+  'FormItemInput.Email': Input.Email,
   'FormItemInput.URL': Input.URL,
   'FormItemInput.Password': Input.Password,
   'FormItemRadio.Group': Radio.Group,

package/es/components/dataSourceComponents/hooks/useActions.d.ts

@@ -2,8 +2,9 @@ import { DataSourceType } from '../provider/dataSource/DataSourceContext';
 export interface UseActionsParams {
     dataSource?: DataSourceType;
     currentValue?: 'server' | 'local';
+    __designMode?: string;
 }
-declare const useActions: ({ dataSource: propsDataSource, currentValue: propsCurrentValue, }?: UseActionsParams) => {
+declare const useActions: ({ dataSource: propsDataSource, currentValue: propsCurrentValue, __designMode, }?: UseActionsParams) => {
     create: (values: Record<string, any>) => Promise<any>;
     get: () => Promise<any>;
     update: (values: Record<string, any>) => Promise<any>;