@pisell/materials 1.0.498 → 1.0.500

package/lib/components/dataSourceComponents/fields/InputNumber/ReadPretty.js

@@ -33,6 +33,7 @@ __export(ReadPretty_exports, {
 });
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
 var import_utils = require("./utils");
 var import_ReadPretty = require("./ReadPretty.less");
 var ReadPretty = (props) => {
@@ -41,10 +42,14 @@ var ReadPretty = (props) => {
     useThousandsSeparator,
     previewFormatter,
     precision = 0,
-    addonAfter
+    addonAfter,
+    renderMode
   } = props;
+  const className = (0, import_classnames.default)("pisell-input-number-read-pretty", {
+    "pisell-input-number-read-pretty-table-view": renderMode === "tableView"
+  });
   if (!value && value !== 0) {
-    return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-input-number-read-pretty" }, "-");
+    return /* @__PURE__ */ import_react.default.createElement("span", { className }, "-");
   }
   const formattedValue = (0, import_utils.formatNumberWithUnit)(
     Number(value),
@@ -54,8 +59,8 @@ var ReadPretty = (props) => {
   if (useThousandsSeparator && (!previewFormatter || previewFormatter === "none")) {
     const parts = formattedValue.split(".");
     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-    return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-input-number-read-pretty" }, parts.join("."), addonAfter);
+    return /* @__PURE__ */ import_react.default.createElement("span", { className }, parts.join("."), addonAfter);
   }
-  return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-input-number-read-pretty" }, formattedValue, addonAfter);
+  return /* @__PURE__ */ import_react.default.createElement("span", { className }, formattedValue, addonAfter);
 };
 var ReadPretty_default = ReadPretty;

package/lib/components/dataSourceComponents/fields/InputNumber/ReadPretty.less

@@ -4,3 +4,8 @@
   font-weight: 600;
   line-height: 24px; /* 150% */
 }
+
+.pisell-input-number-read-pretty-table-view {
+  font-size: 14px;
+  font-weight: 400;
+}

package/lib/components/dataSourceComponents/fields/Radio/ReadPretty.js

@@ -39,9 +39,9 @@ var RadioReadPretty = (props) => {
   return (0, import_utils.renderValueWithMap)(value);
 };
 var RadioGroupReadPretty = (props) => {
-  const { value, options } = props;
+  const { value, options, renderMode } = props;
   const valueMap = (0, import_useValueMap.default)(options || []);
-  return (0, import_utils.renderValueWithMap)(value, valueMap);
+  return (0, import_utils.renderValueWithMap)(value, valueMap, renderMode);
 };
 RadioReadPretty.Group = RadioGroupReadPretty;
 var ReadPretty_default = RadioReadPretty;

package/lib/components/dataSourceComponents/fields/Select/ReadPretty.js

@@ -35,8 +35,8 @@ module.exports = __toCommonJS(ReadPretty_exports);
 var import_utils = require("../../dataSourceForm/utils");
 var import_useValueMap = __toESM(require("../../hooks/useValueMap"));
 var SelectReadPretty = (props) => {
-  const { value, options } = props;
+  const { value, options, renderMode } = props;
   const valueMap = (0, import_useValueMap.default)(options || []);
-  return (0, import_utils.renderValueWithMap)(value, valueMap);
+  return (0, import_utils.renderValueWithMap)(value, valueMap, renderMode);
 };
 var ReadPretty_default = SelectReadPretty;

package/lib/components/dataSourceComponents/fields/TimePicker/ReadPretty.js

@@ -33,9 +33,18 @@ __export(ReadPretty_exports, {
 });
 module.exports = __toCommonJS(ReadPretty_exports);
 var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
 var import_ReadPretty = require("./ReadPretty.less");
 var TimePickerReadPretty = (props) => {
-  const { value } = props;
-  return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-time-picker-read-pretty" }, value);
+  const { value, renderMode } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: (0, import_classnames.default)("pisell-time-picker-read-pretty", {
+        "pisell-time-picker-read-pretty-table-view": renderMode === "tableView"
+      })
+    },
+    value
+  );
 };
 var ReadPretty_default = TimePickerReadPretty;

package/lib/components/dataSourceComponents/fields/TimePicker/ReadPretty.less

@@ -4,3 +4,8 @@
   font-weight: 600;
   line-height: 24px; /* 150% */
 }
+
+.pisell-time-picker-read-pretty-table-view {
+  font-size: 14px;
+  font-weight: 400;
+}

package/lib/components/dataSourceComponents/fields/Translation/BaseTranslation.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TranslationProps } from './type';
+import './index.less';
+declare const Translation: React.FC<TranslationProps>;
+export default Translation;

package/lib/components/dataSourceComponents/fields/Translation/BaseTranslation.js

@@ -0,0 +1,107 @@
+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/dataSourceComponents/fields/Translation/BaseTranslation.tsx
+var BaseTranslation_exports = {};
+__export(BaseTranslation_exports, {
+  default: () => BaseTranslation_default
+});
+module.exports = __toCommonJS(BaseTranslation_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_locales = require("../../../../locales");
+var import_index = require("./index.less");
+var defaultValue = {
+  en: "",
+  "zh-CN": "",
+  "zh-HK": "",
+  original: ""
+};
+var languageConfig = [
+  { key: "original", label: (0, import_locales.getText)("pisell-translation-original") },
+  { key: "en", label: "English" },
+  { key: "zh-CN", label: "简体中文" },
+  { key: "zh-HK", label: "繁體中文" }
+];
+var Translation = ({
+  value = defaultValue,
+  onChange,
+  placeholder,
+  disabled
+}) => {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const hasAnyTranslation = (0, import_react.useCallback)(() => {
+    return Object.entries(value).some(([key, val]) => val);
+  }, [value]);
+  const handleInputChange = (0, import_react.useCallback)(
+    (lang) => (e) => {
+      const newValue = {
+        ...value,
+        [lang]: e.target.value
+      };
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [value, onChange]
+  );
+  const content = /* @__PURE__ */ import_react.default.createElement("div", { className: "translation-popover" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical", style: { width: "100%" }, size: 16 }, languageConfig.map(({ key, label }) => /* @__PURE__ */ import_react.default.createElement("div", { key, className: "translation-field" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "translation-label" }, label), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      value: value[key],
+      onChange: handleInputChange(key),
+      allowClear: true
+    }
+  )))));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "translation-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      value: value.original,
+      onChange: handleInputChange("original"),
+      placeholder,
+      disabled,
+      className: "translation-input"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Popover,
+    {
+      content,
+      trigger: "click",
+      open,
+      onOpenChange: setOpen,
+      placement: "bottomRight"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `translation-icon-wrapper ${hasAnyTranslation() ? "has-translation" : ""} ${disabled ? "disabled" : ""}`
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.GlobalOutlined, { className: "translation-icon" })
+    )
+  ));
+};
+var BaseTranslation_default = Translation;

package/lib/components/dataSourceComponents/fields/Translation/ReadPretty.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TranslationProps } from './type';
+import './ReadPretty.less';
+declare const TranslationReadPretty: (props: TranslationProps) => React.JSX.Element;
+export default TranslationReadPretty;

package/lib/components/dataSourceComponents/fields/Translation/ReadPretty.js

@@ -0,0 +1,50 @@
+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/dataSourceComponents/fields/Translation/ReadPretty.tsx
+var ReadPretty_exports = {};
+__export(ReadPretty_exports, {
+  default: () => ReadPretty_default
+});
+module.exports = __toCommonJS(ReadPretty_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_ReadPretty = require("./ReadPretty.less");
+var TranslationReadPretty = (props) => {
+  const { value, renderMode } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: (0, import_classnames.default)("pisell-translation-read-pretty", {
+        "pisell-translation-read-pretty-table-view": renderMode === "tableView"
+      })
+    },
+    (value == null ? void 0 : value.original) || ""
+  );
+};
+var ReadPretty_default = TranslationReadPretty;

package/lib/components/dataSourceComponents/fields/Translation/ReadPretty.less

@@ -0,0 +1,11 @@
+.pisell-translation-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}
+
+.pisell-translation-read-pretty-table-view {
+  font-size: 14px;
+  font-weight: 400;
+}

package/lib/components/dataSourceComponents/fields/Translation/WithMode.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TranslationProps } from './type';
+declare const TranslationWithMode: import("react").FC<TranslationProps & import("../../dataSourceForm/utils").WithModeProps>;
+export default TranslationWithMode;

package/lib/components/dataSourceComponents/fields/Translation/WithMode.js

@@ -0,0 +1,39 @@
+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/dataSourceComponents/fields/Translation/WithMode.ts
+var WithMode_exports = {};
+__export(WithMode_exports, {
+  default: () => WithMode_default
+});
+module.exports = __toCommonJS(WithMode_exports);
+var import_ReadPretty = __toESM(require("./ReadPretty"));
+var import_utils = require("../../dataSourceForm/utils");
+var import_BaseTranslation = __toESM(require("./BaseTranslation"));
+var TranslationWithMode = (0, import_utils.withMode)(import_BaseTranslation.default, import_ReadPretty.default);
+var WithMode_default = TranslationWithMode;

package/lib/components/dataSourceComponents/fields/Translation/index.d.ts

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

package/lib/components/dataSourceComponents/fields/Translation/index.js

@@ -0,0 +1,38 @@
+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/dataSourceComponents/fields/Translation/index.tsx
+var Translation_exports = {};
+__export(Translation_exports, {
+  default: () => Translation_default
+});
+module.exports = __toCommonJS(Translation_exports);
+var import_utils = require("../../dataSourceForm/utils");
+var import_BaseTranslation = __toESM(require("./BaseTranslation"));
+var Translation = (0, import_utils.withFormItem)(import_BaseTranslation.default);
+var Translation_default = Translation;

package/lib/components/dataSourceComponents/fields/Translation/index.less

@@ -0,0 +1,61 @@
+.translation-wrapper {
+  position: relative;
+
+  .translation-input {
+    padding-right: 40px;
+  }
+
+  .translation-icon-wrapper {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    padding: 0 13px;
+    display: flex;
+    align-items: center;
+    border-radius: 0 6px 6px 0;
+    transition: all 0.3s;
+    cursor: pointer;
+    .translation-icon {
+      color: #d9d9d9;
+      transition: all 0.3s;
+    }
+
+    &:hover {
+        .translation-icon {
+            color: var(--theme-color);
+        }
+    }
+
+
+    &.has-translation {
+      background-color: var(--theme-color);
+      transition: all 0.3s;
+
+      .translation-icon {
+        transition: all 0.3s;
+
+        color: #fff;
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      
+      .translation-icon {
+        color: var(--ant-color-text-disabled);
+      }
+    }
+  }
+}
+
+.translation-popover {
+  min-width: 300px;
+  padding: 8px;
+
+  .translation-field {
+    .translation-label {
+      margin-bottom: 8px;
+    }
+  }
+} 

package/lib/components/dataSourceComponents/fields/Translation/type.d.ts

@@ -0,0 +1,15 @@
+import { ModeType } from "../../dataSourceForm/type";
+export interface TranslationValue {
+    en: string;
+    'zh-CN': string;
+    'zh-HK': string;
+    original: string;
+}
+export interface TranslationProps {
+    renderMode: ModeType;
+    value?: TranslationValue;
+    onChange?: (value: TranslationValue) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+}

package/lib/components/dataSourceComponents/fields/Translation/type.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Translation/type.ts
+var type_exports = {};
+module.exports = __toCommonJS(type_exports);

package/lib/components/dataSourceComponents/fields/Upload/BaseUpload.d.ts

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