@pisell/private-materials 6.7.9 → 6.8.1

package/es/pro/Selector/Selector.js

@@ -0,0 +1,283 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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); }
+import React, { useEffect, useImperativeHandle, forwardRef } from 'react';
+import { Radio, Checkbox, Row, Col, Tag, Select } from 'antd';
+import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { locales } from '@pisell/utils';
+import localeTexts from "./locales";
+import { CardItem, NumericStepper } from "./components";
+import useSelectionController from "./hooks/useSelectionController";
+import useEngineContext from "../../hooks/useEngineContext";
+import "./selector.less";
+var ARow = Row;
+var ACol = Col;
+var ATag = Tag;
+var Selector = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context$appHelper;
+  var disabled = props.disabled,
+    titleProps = props.titleProps,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'single' : _props$mode,
+    _props$valueType = props.valueType,
+    valueType = _props$valueType === void 0 ? 'primitive' : _props$valueType,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
+    grid = props.grid,
+    renderItem = props.renderItem,
+    itemConfig = props.item,
+    ruleConfig = props.ruleConfig,
+    fieldNames = props.fieldNames;
+  var context = useEngineContext();
+  locales.init(localeTexts, (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.storage) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.get('umi_locale')) || 'en');
+  var _useSelectionControll = useSelectionController(props),
+    state = _useSelectionControll.state,
+    actions = _useSelectionControll.actions;
+  var options = state.options,
+    showQuantity = state.showQuantity,
+    errors = state.errors,
+    validated = state.validated;
+  useImperativeHandle(ref, function () {
+    return {
+      validate: function validate() {
+        return actions.validate();
+      },
+      getErrors: function getErrors() {
+        return errors || [];
+      },
+      reset: function reset() {
+        return actions.reset();
+      },
+      clear: function clear() {
+        return actions.clear();
+      }
+    };
+  });
+  useEffect(function () {
+    document.body.id = 'body';
+  }, []);
+
+  // 选择指示器
+  var renderIndicator = function renderIndicator(option, isDefault) {
+    if (mode === 'single') {
+      return /*#__PURE__*/React.createElement(Radio, {
+        className: "pisell-selector_radio-trigger",
+        checked: option.selected,
+        disabled: disabled || option.disabled,
+        onChange: function onChange(e) {
+          e.stopPropagation();
+          if (option.selected) {
+            actions.update(option._key, {
+              quantity: 0
+            });
+          } else {
+            actions.update(option._key, {});
+          }
+        },
+        children: isDefault ? option._label : undefined
+      });
+    } else {
+      return /*#__PURE__*/React.createElement(Checkbox, {
+        className: "pisell-selector_checkbox-trigger",
+        checked: option.selected,
+        disabled: disabled || option.disabled,
+        onChange: function onChange(e) {
+          e.stopPropagation();
+          actions.toggle(option._key);
+        },
+        children: isDefault ? option._label : undefined
+      });
+    }
+  };
+
+  // 数量选择器
+  var renderQuantitySelector = function renderQuantitySelector(option) {
+    var _option$ruleConfig$mi, _option$ruleConfig, _option$ruleConfig$ma, _option$ruleConfig2;
+    if (valueType === 'primitive') return null;
+    if (!showQuantity) return null;
+    return /*#__PURE__*/React.createElement(NumericStepper, {
+      min: (_option$ruleConfig$mi = option === null || option === void 0 || (_option$ruleConfig = option.ruleConfig) === null || _option$ruleConfig === void 0 ? void 0 : _option$ruleConfig.min) !== null && _option$ruleConfig$mi !== void 0 ? _option$ruleConfig$mi : 0,
+      max: (_option$ruleConfig$ma = option === null || option === void 0 || (_option$ruleConfig2 = option.ruleConfig) === null || _option$ruleConfig2 === void 0 ? void 0 : _option$ruleConfig2.max) !== null && _option$ruleConfig$ma !== void 0 ? _option$ruleConfig$ma : Number.MAX_SAFE_INTEGER,
+      value: option.quantity,
+      disabled: disabled || option.disabled,
+      onChange: function onChange(value) {
+        return actions.update(option._key, {
+          quantity: value
+        });
+      }
+    });
+  };
+
+  // 单个选项
+  var renderOption = function renderOption(option) {
+    var optionDisabled = option.disabled;
+    var handleClick = function handleClick() {
+      if (disabled || optionDisabled) return;
+      actions.toggle(option._key);
+    };
+    if (renderItem) {
+      return renderItem({
+        dataSource: option,
+        actions: actions,
+        trigger: renderIndicator(option),
+        numberSelector: renderQuantitySelector(option),
+        onClick: handleClick
+      });
+    }
+    if (!variant || variant === 'default') {
+      return renderIndicator(option, true);
+    }
+    var numberSelector = renderQuantitySelector(option);
+    var trigger = renderIndicator(option);
+    return /*#__PURE__*/React.createElement(CardItem, _extends({}, itemConfig, {
+      key: option._key,
+      dataSource: option,
+      selected: option.selected,
+      disabled: disabled || option.disabled,
+      trigger: trigger,
+      numberSelector: numberSelector,
+      onClick: handleClick
+    }));
+  };
+  var renderOptions = function renderOptions() {
+    if (variant === 'select' && valueType === 'primitive') {
+      var _value = state.values;
+      return /*#__PURE__*/React.createElement(Select, {
+        size: "large",
+        style: {
+          width: '100%'
+        },
+        mode: mode === 'multiple' ? 'multiple' : undefined,
+        options: options,
+        fieldNames: fieldNames,
+        value: _value,
+        onChange: function onChange(value) {
+          return actions.setValue(value);
+        },
+        disabled: disabled
+      });
+    }
+    if (grid) {
+      var _grid$columns = grid.columns,
+        columns = _grid$columns === void 0 ? 1 : _grid$columns,
+        align = grid.align,
+        _grid$gutter = grid.gutter,
+        gutter = _grid$gutter === void 0 ? 16 : _grid$gutter,
+        justify = grid.justify,
+        wrap = grid.wrap,
+        _grid$colConfig = grid.colConfig,
+        colConfig = _grid$colConfig === void 0 ? {} : _grid$colConfig;
+      return /*#__PURE__*/React.createElement(ARow, {
+        gutter: gutter,
+        justify: justify,
+        align: align,
+        wrap: wrap
+      }, options.map(function (option) {
+        return /*#__PURE__*/React.createElement(ACol, _extends({
+          key: option._key,
+          span: 24 / columns
+        }, colConfig), renderOption(option));
+      }));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      }
+    }, options.map(renderOption));
+  };
+  var renderErrorMsg = function renderErrorMsg() {
+    if (!(errors !== null && errors !== void 0 && errors.length)) return null;
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: '#D92D20'
+      }
+    }, errors[0].message);
+  };
+  var renderRequiredTag = function renderRequiredTag() {
+    var _ref = ruleConfig || {},
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required;
+    if (!required) return null;
+    var style = {
+      borderRadius: 16
+    };
+    if (errors.find(function (item) {
+      return item.type === 'required';
+    })) {
+      return /*#__PURE__*/React.createElement(ATag, {
+        icon: /*#__PURE__*/React.createElement(ExclamationCircleOutlined, null),
+        color: "error",
+        style: style
+      }, locales.getText('pisell2.pro.selector.required-tag'));
+    }
+    if (validated) {
+      return /*#__PURE__*/React.createElement(ATag, {
+        icon: /*#__PURE__*/React.createElement(CheckCircleOutlined, null),
+        color: "success",
+        style: style
+      }, locales.getText('pisell2.pro.selector.required-tag'));
+    }
+    return /*#__PURE__*/React.createElement(ATag, {
+      style: style
+    }, locales.getText('pisell2.pro.selector.required-tag'));
+  };
+  var renderTip = function renderTip() {
+    var _titleProps$tip, _titleProps$tip2, _titleProps$tip3;
+    if ((titleProps === null || titleProps === void 0 || (_titleProps$tip = titleProps.tip) === null || _titleProps$tip === void 0 ? void 0 : _titleProps$tip.visible) === false) return null;
+    var text = titleProps === null || titleProps === void 0 || (_titleProps$tip2 = titleProps.tip) === null || _titleProps$tip2 === void 0 ? void 0 : _titleProps$tip2.text;
+    if (ruleConfig !== null && ruleConfig !== void 0 && ruleConfig.min || ruleConfig !== null && ruleConfig !== void 0 && ruleConfig.max) {
+      text = locales.getText('pisell2.pro.selector.validate.min-max-selection')(ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.min, ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.max);
+    }
+    if (!text) {
+      if (mode === 'multiple') {
+        text = locales.getText('pisell2.pro.selector.mode.multiple');
+      } else {
+        text = locales.getText('pisell2.pro.selector.mode.single');
+      }
+    }
+    if (!text) return null;
+    return /*#__PURE__*/React.createElement("span", {
+      style: _objectSpread({
+        color: '#475467'
+      }, titleProps === null || titleProps === void 0 || (_titleProps$tip3 = titleProps.tip) === null || _titleProps$tip3 === void 0 ? void 0 : _titleProps$tip3.style)
+    }, "(", text, ")");
+  };
+  var renderTitle = function renderTitle() {
+    var _titleProps$icon, _titleProps$icon2, _titleProps$icon3, _titleProps$icon4, _titleProps$title, _titleProps$title2, _titleProps$title3, _titleProps$title$tex, _titleProps$title4;
+    if ((titleProps === null || titleProps === void 0 ? void 0 : titleProps.visible) === false) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      style: _objectSpread({
+        marginBottom: 12,
+        display: 'flex',
+        alignItems: 'center'
+      }, (titleProps === null || titleProps === void 0 ? void 0 : titleProps.style) || {})
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        flex: 1
+      }
+    }, (titleProps === null || titleProps === void 0 || (_titleProps$icon = titleProps.icon) === null || _titleProps$icon === void 0 ? void 0 : _titleProps$icon.visible) === false || !(titleProps !== null && titleProps !== void 0 && (_titleProps$icon2 = titleProps.icon) !== null && _titleProps$icon2 !== void 0 && _titleProps$icon2.icon) ? null : /*#__PURE__*/React.createElement("span", {
+      style: titleProps === null || titleProps === void 0 || (_titleProps$icon3 = titleProps.icon) === null || _titleProps$icon3 === void 0 ? void 0 : _titleProps$icon3.style
+    }, titleProps === null || titleProps === void 0 || (_titleProps$icon4 = titleProps.icon) === null || _titleProps$icon4 === void 0 ? void 0 : _titleProps$icon4.icon), (titleProps === null || titleProps === void 0 || (_titleProps$title = titleProps.title) === null || _titleProps$title === void 0 ? void 0 : _titleProps$title.visible) === false || !(titleProps !== null && titleProps !== void 0 && (_titleProps$title2 = titleProps.title) !== null && _titleProps$title2 !== void 0 && _titleProps$title2.text) && !props.title ? null : /*#__PURE__*/React.createElement("span", {
+      style: _objectSpread({
+        fontSize: 16,
+        fontWeight: 600
+      }, (titleProps === null || titleProps === void 0 || (_titleProps$title3 = titleProps.title) === null || _titleProps$title3 === void 0 ? void 0 : _titleProps$title3.style) || {})
+    }, (_titleProps$title$tex = titleProps === null || titleProps === void 0 || (_titleProps$title4 = titleProps.title) === null || _titleProps$title4 === void 0 ? void 0 : _titleProps$title4.text) !== null && _titleProps$title$tex !== void 0 ? _titleProps$title$tex : props.title), renderTip(), renderErrorMsg()), renderRequiredTag());
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: "pisell-pro-selector-".concat(props.id),
+    style: {
+      width: '100%'
+    }
+  }, renderTitle(), renderOptions());
+});
+export default Selector;

package/es/pro/Selector/SelectorGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SelectionValue, SelectorGroupProps } from './types';
+import './selectorGroup.less';
+export declare type SelectorGroupRef = {
+    getValues: (includeHidden?: boolean) => Record<string, SelectionValue>;
+    setValues: (values: Record<string, SelectionValue>) => void;
+    validate: () => Promise<Record<string, never>>;
+    reset: () => void;
+};
+declare const SelectorGroup: React.ForwardRefExoticComponent<Omit<SelectorGroupProps, "ref"> & React.RefAttributes<SelectorGroupRef>>;
+export default SelectorGroup;