@pisell/materials 3.0.62 → 6.0.1

package/es/components/dataSourceComponents/fields/TimePicker/WithMode.js

@@ -0,0 +1,109 @@
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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, { useMemo } from 'react';
+import { TimePicker as AntTimePicker } from 'antd';
+import { ClockCircleOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import classNames from 'classnames';
+import { isString } from '@pisell/utils';
+import SelectTime from "../../../select-time";
+import usePisellConfig from "../../../pisell-config-provider/hooks/usePisellConfig";
+import { omit } from "../../../table/Table/utils";
+import ReadPretty from "./ReadPretty";
+import { withMode } from "../../dataSourceForm/utils";
+import "./style.less";
+var TimePicker = function TimePicker(props) {
+  var config = usePisellConfig();
+  var _props$format = props.format,
+    format = _props$format === void 0 ? 'HH:mm' : _props$format,
+    className = props.className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    value = props.value,
+    _onChange = props.onChange,
+    disabled = props.disabled,
+    placeholder = props.placeholder,
+    propsDefaultValue = props.defaultValue;
+
+  // 处理 value 兼容性
+  var normalizedValue = useMemo(function () {
+    if (!value) return undefined;
+    if (dayjs.isDayjs(value)) return value;
+    try {
+      return dayjs(String(value), format);
+    } catch (_unused) {
+      return undefined;
+    }
+  }, [value, format]);
+  var defaultValue = useMemo(function () {
+    if (!propsDefaultValue) return undefined;
+    if (dayjs.isDayjs(propsDefaultValue)) return propsDefaultValue;
+    try {
+      return dayjs(String(propsDefaultValue), format);
+    } catch (_unused2) {
+      return undefined;
+    }
+  }, [propsDefaultValue, format]);
+  if (config.platform === 'h5') {
+    var sizeClassMap = {
+      large: 'pisell-h5-time-picker-lg',
+      middle: '',
+      small: 'pisell-h5-time-picker-sm'
+    };
+
+    // 处理格式化
+    var timeFormat = isString(format) ? format : 'HH:mm:ss';
+
+    // 根据格式判断步进值
+    var stepValue = timeFormat.includes('ss') ? 1 : 60;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-h5-time-picker-wrapper"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "time",
+      step: stepValue,
+      value: (normalizedValue === null || normalizedValue === void 0 ? void 0 : normalizedValue.format(timeFormat)) || '',
+      onChange: function onChange(e) {
+        var timeString = e.target.value;
+        if (_onChange && timeString) {
+          // 使用当前日期创建完整的时间对象
+          var today = dayjs().format('YYYY-MM-DD');
+          var timeValue = dayjs("".concat(today, " ").concat(timeString));
+          _onChange(timeValue, timeValue.format(timeFormat));
+        }
+      },
+      disabled: disabled,
+      placeholder: placeholder,
+      className: classNames('pisell-h5-time-picker', sizeClassMap[size], className)
+    }), /*#__PURE__*/React.createElement(ClockCircleOutlined, {
+      className: "pisell-h5-time-picker-suffix"
+    }));
+  }
+  if (format === 'HH:mm') {
+    return /*#__PURE__*/React.createElement(SelectTime, {
+      value: normalizedValue === null || normalizedValue === void 0 ? void 0 : normalizedValue.format('HH:mm'),
+      onChange: function onChange(timeString) {
+        if (_onChange) {
+          var timeValue = timeString ? dayjs("".concat(dayjs().format('YYYY-MM-DD'), " ").concat(timeString)) : null;
+          _onChange(timeValue, timeString || '');
+        }
+      },
+      timePickerProps: _objectSpread({
+        format: format
+      }, omit(props, ['value', 'defaultValue']) || {}),
+      popoverProps: {},
+      timeProps: {},
+      slice: 15
+    });
+  }
+  return /*#__PURE__*/React.createElement(AntTimePicker, _extends({}, props, {
+    value: normalizedValue,
+    defaultValue: defaultValue
+  }));
+};
+var TimePickerWithMode = withMode(TimePicker, ReadPretty);
+export default TimePickerWithMode;

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

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

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

@@ -0,0 +1,10 @@
+import { withFormItem } from "../../dataSourceForm/utils";
+import TimePickerWithMode from "./WithMode";
+var TimePicker = withFormItem(TimePickerWithMode, {
+  innerProps: {
+    style: {
+      width: '100%'
+    }
+  }
+});
+export default TimePicker;

package/es/components/dataSourceComponents/fields/TimePicker/style.less

@@ -0,0 +1,86 @@
+.pisell-h5-time-picker-wrapper {
+  position: relative;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+
+  .pisell-h5-time-picker-suffix {
+    position: absolute;
+    right: 11px;
+    color: var(--pisell-lowcode-color-icon, #98A2B3);
+    pointer-events: none;
+    z-index: 1;
+    cursor: pointer;
+  }
+}
+
+.pisell-h5-time-picker {
+  width: 100%;
+  padding: 4px 11px;
+  color: var(--pisell-lowcode-color-text);
+  font-size: 14px;
+  line-height: 1.5714285714285714;
+  background-color: var(--pisell-lowcode-color-bg-container);
+  border: 1px solid var(--pisell-lowcode-color-border);
+  border-radius: var(--pisell-lowcode-border-radius);
+  transition: all 0.2s;
+  outline: none;
+  box-sizing: border-box;
+
+  // 让原生图标透明但保持可点击
+  &::-webkit-calendar-picker-indicator {
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: absolute;
+    right: 8px;
+  }
+  &::-webkit-time-picker-indicator {
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: absolute;
+    right: 8px;
+  }
+
+  // 默认是 middle 尺寸
+  height: 32px;
+
+  &.pisell-h5-time-picker-lg {
+    padding: 7px 11px;
+    height: 40px;
+    font-size: 16px;
+  }
+
+  &.pisell-h5-time-picker-sm {
+    padding: 0px 7px;
+    height: 24px;
+  }
+
+  &:hover {
+    border-color: var(--pisell-lowcode-color-primary);
+  }
+
+  &:focus {
+    border-color: var(--pisell-lowcode-color-primary);
+    box-shadow: 0 0 0 2px var(--pisell-lowcode-color-primary-bg-hover);
+    outline: 0;
+  }
+
+  &:disabled {
+    color: var(--pisell-lowcode-color-text-disabled);
+    background-color: var(--pisell-lowcode-color-bg-container-disabled);
+    border-color: var(--pisell-lowcode-color-border);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: var(--pisell-lowcode-color-text-placeholder);
+  }
+
+  // 添加右侧padding以容纳图标
+  padding-right: 30px !important;
+} 

package/es/components/dataSourceComponents/fields/TimePicker/type.d.ts

@@ -0,0 +1,5 @@
+import { TimePickerProps as AntTimePickerProps } from 'antd';
+import { ModeType } from "../../dataSourceForm/type";
+export interface TimePickerProps extends Omit<AntTimePickerProps, 'renderMode'> {
+    renderMode: ModeType;
+}

package/es/components/dataSourceComponents/fields/TimePicker/type.js

@@ -0,0 +1 @@
+export {};

package/es/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/es/components/dataSourceComponents/fields/Translation/BaseTranslation.js

@@ -0,0 +1,111 @@
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useCallback } from 'react';
+import { Input, Popover, Space } from 'antd';
+import { GlobalOutlined } from '@ant-design/icons';
+import { getText } from "../../../../locales";
+import "./index.less";
+var defaultValue = {
+  en: '',
+  'zh-CN': '',
+  'zh-HK': '',
+  original: ''
+};
+var languageConfig = [{
+  key: 'original',
+  label: getText('pisell-translation-original')
+}, {
+  key: 'en',
+  label: 'English'
+}, {
+  key: 'zh-CN',
+  label: '简体中文'
+}, {
+  key: 'zh-HK',
+  label: '繁體中文'
+}];
+var Translation = function Translation(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? defaultValue : _ref$value,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var hasAnyTranslation = useCallback(function () {
+    if (!value) {
+      return false;
+    }
+    return Object.entries(value).some(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        val = _ref3[1];
+      return key !== 'original' && val;
+    });
+  }, [value]);
+  var handleInputChange = useCallback(function (lang) {
+    return function (e) {
+      var newValue = _objectSpread(_objectSpread({}, value), {}, _defineProperty({}, lang, e.target.value));
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+  }, [value, onChange]);
+  var content = /*#__PURE__*/React.createElement("div", {
+    className: "translation-popover"
+  }, /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical",
+    style: {
+      width: '100%'
+    },
+    size: 16
+  }, languageConfig.map(function (_ref4) {
+    var key = _ref4.key,
+      label = _ref4.label;
+    return /*#__PURE__*/React.createElement("div", {
+      key: key,
+      className: "translation-field"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "translation-label"
+    }, label), /*#__PURE__*/React.createElement(Input, {
+      value: (value === null || value === void 0 ? void 0 : value[key]) || "",
+      onChange: handleInputChange(key),
+      allowClear: true
+    }));
+  })));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "translation-wrapper"
+  }, /*#__PURE__*/React.createElement(Input, {
+    value: (value === null || value === void 0 ? void 0 : value.original) || "",
+    onChange: handleInputChange('original'),
+    placeholder: placeholder,
+    disabled: disabled,
+    className: "translation-input"
+  }), /*#__PURE__*/React.createElement(Popover, {
+    content: content,
+    trigger: "click",
+    open: open,
+    onOpenChange: function onOpenChange(open) {
+      if (disabled) {
+        return;
+      }
+      setOpen(open);
+    },
+    placement: "bottomRight"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "translation-icon-wrapper ".concat(hasAnyTranslation() ? 'has-translation' : '', " ").concat(disabled ? 'disabled' : '')
+  }, /*#__PURE__*/React.createElement(GlobalOutlined, {
+    className: "translation-icon"
+  }))));
+};
+export default Translation;

package/es/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/es/components/dataSourceComponents/fields/Translation/ReadPretty.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames';
+import "./ReadPretty.less";
+var TranslationReadPretty = function TranslationReadPretty(props) {
+  var value = props.value,
+    renderMode = props.renderMode;
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames('pisell-translation-read-pretty', {
+      'pisell-translation-read-pretty-table-view': renderMode === 'tableView'
+    })
+  }, (value === null || value === void 0 ? void 0 : value.original) || '');
+};
+export default TranslationReadPretty;

package/es/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/es/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/es/components/dataSourceComponents/fields/Translation/WithMode.js

@@ -0,0 +1,5 @@
+import ReadPretty from "./ReadPretty";
+import { withMode } from "../../dataSourceForm/utils";
+import BaseTranslation from "./BaseTranslation";
+var TranslationWithMode = withMode(BaseTranslation, ReadPretty);
+export default TranslationWithMode;

package/es/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").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps>;
+export default Translation;

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

@@ -0,0 +1,4 @@
+import { withFormItem } from "../../dataSourceForm/utils";
+import TranslationWithMode from "./WithMode";
+var Translation = withFormItem(TranslationWithMode);
+export default Translation;

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

@@ -0,0 +1,58 @@
+.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;
+    }
+
+    &.has-translation {
+      background-color: var(--theme-color, #7F56D9);
+      transition: all 0.3s;
+      .translation-icon {
+        transition: all 0.3s;
+        color: #fff;
+      }
+    }
+
+    &:hover {
+      .translation-icon {
+        color: #a481e6;
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+     .translation-icon {
+        color: #d9d9d9;
+      }
+    }
+  }
+}
+
+.translation-popover {
+  min-width: 300px;
+  padding: 8px;
+
+  .translation-field {
+    .translation-label {
+      margin-bottom: 8px;
+    }
+  }
+} 

package/es/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/es/components/dataSourceComponents/fields/Translation/type.js

@@ -0,0 +1 @@
+export {};

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

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