@fonixtree/magic-design 0.0.6 → 0.0.9

package/src/components/common/ProductSource/index.js

@@ -0,0 +1,91 @@
+import { __awaiter, __generator } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState } from 'react';
+import { commonFetch } from '../../utils/commonUtil.js';
+import Button from '../Button/index.js';
+import ProductModal from '../ProductModal/index.js';
+import './index.less.js';
+
+function ProductSource(_a) {
+  var _this = this;
+
+  var value = _a.value,
+      onChange = _a.onChange;
+
+  var _b = useState([]),
+      selectedProds = _b[0],
+      setSelectedProds = _b[1];
+
+  var _c = useState(false),
+      visible = _c[0],
+      setVisbile = _c[1];
+
+  var onSelectProduct = function () {
+    return __awaiter(_this, void 0, void 0, function () {
+      var list;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!(value && value.length > 0)) return [3
+            /*break*/
+            , 2];
+            return [4
+            /*yield*/
+            , commonFetch("".concat(window.magicDesign.MBaseUrl, "/products"), {
+              products: value
+            }, 'GET')];
+
+          case 1:
+            list = _a.sent().list;
+            setSelectedProds(list || []);
+            return [3
+            /*break*/
+            , 3];
+
+          case 2:
+            setSelectedProds([]);
+            _a.label = 3;
+
+          case 3:
+            setVisbile(true);
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  };
+
+  var handleModalSave = function (list) {
+    var ids = list.map(function (prod) {
+      return prod.productId;
+    }).join(',');
+    onChange(ids);
+  };
+
+  var getLength = function () {
+    if (!value) {
+      return 0;
+    }
+
+    return value.split(',').length;
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "productSourceWrap"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onSelectProduct,
+    type: "primary"
+  }, "Select Product"), /*#__PURE__*/React__default.createElement("div", {
+    className: "total"
+  }, "Total: ", getLength(), " products"), visible && /*#__PURE__*/React__default.createElement(ProductModal, {
+    closeModal: function () {
+      return setVisbile(false);
+    },
+    defaultList: selectedProds,
+    handleModalSave: handleModalSave,
+    maxSelect: 100,
+    visible: visible
+  }));
+}
+
+export { ProductSource as default };

package/src/components/common/ProductSource/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_productSourceWrap__pXqgj .index_total__yhVZt {\n  margin-top: 10px;\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  text-align: center;\n  color: #8493AF;\n}\n";
+styleInject(css_248z);

package/src/components/common/RcCollapse/Collapse.js

@@ -0,0 +1,176 @@
+import { __extends, __spreadArray } from '../../../../node_modules/tslib/tslib.es6.js';
+import * as React from 'react';
+import classNames from 'classnames';
+import shallowequal from '../../../../node_modules/shallowequal/index.js';
+import _default from '../../../../node_modules/rc-util/lib/Children/toArray.js';
+import CollapsePanel from './Panel.js';
+import collapseMotion from './motionUtil.js';
+import './index.less.js';
+
+function getActiveKeysArray(activeKey) {
+  var currentActiveKey = activeKey;
+
+  if (!Array.isArray(currentActiveKey)) {
+    var activeKeyType = typeof currentActiveKey;
+    currentActiveKey = activeKeyType === 'number' || activeKeyType === 'string' ? [currentActiveKey] : [];
+  }
+
+  return currentActiveKey.map(function (key) {
+    return String(key);
+  });
+}
+
+var Collapse =
+/** @class */
+function (_super) {
+  __extends(Collapse, _super);
+
+  function Collapse(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.onClickItem = function (key) {
+      var activeKey = _this.state.activeKey;
+
+      if (_this.props.accordion) {
+        activeKey = activeKey[0] === key ? [] : [key];
+      } else {
+        activeKey = __spreadArray([], activeKey, true);
+        var index = activeKey.indexOf(key);
+        var isActive = index > -1;
+
+        if (isActive) {
+          // remove active state
+          activeKey.splice(index, 1);
+        } else {
+          activeKey.push(key);
+        }
+      }
+
+      _this.setActiveKey(activeKey);
+    };
+
+    _this.getNewChild = function (child, index) {
+      if (!child) return null;
+      var activeKey = _this.state.activeKey;
+      var _a = _this.props,
+          prefixCls = _a.prefixCls,
+          _b = _a.openMotion,
+          openMotion = _b === void 0 ? collapseMotion : _b,
+          accordion = _a.accordion,
+          rootDestroyInactivePanel = _a.destroyInactivePanel,
+          expandIcon = _a.expandIcon,
+          collapsible = _a.collapsible; // If there is no key provide, use the panel order as default key
+
+      var key = child.key || String(index);
+      var _c = child.props,
+          header = _c.header,
+          headerClass = _c.headerClass,
+          destroyInactivePanel = _c.destroyInactivePanel,
+          childCollapsible = _c.collapsible;
+      var isActive = false;
+
+      if (accordion) {
+        isActive = activeKey[0] === key;
+      } else {
+        isActive = activeKey.indexOf(key) > -1;
+      }
+
+      var mergeCollapsible = childCollapsible !== null && childCollapsible !== void 0 ? childCollapsible : collapsible;
+      var props = {
+        key: key,
+        panelKey: key,
+        header: header,
+        headerClass: headerClass,
+        isActive: isActive,
+        prefixCls: prefixCls,
+        destroyInactivePanel: destroyInactivePanel !== null && destroyInactivePanel !== void 0 ? destroyInactivePanel : rootDestroyInactivePanel,
+        openMotion: openMotion,
+        accordion: accordion,
+        children: child.props.children,
+        onItemClick: mergeCollapsible === 'disabled' ? null : _this.onClickItem,
+        expandIcon: expandIcon,
+        collapsible: mergeCollapsible
+      }; // https://github.com/ant-design/ant-design/issues/20479
+
+      if (typeof child.type === 'string') {
+        return child;
+      }
+
+      Object.keys(props).forEach(function (propName) {
+        if (typeof props[propName] === 'undefined') {
+          delete props[propName];
+        }
+      });
+      return /*#__PURE__*/React.cloneElement(child, props);
+    };
+
+    _this.getItems = function () {
+      var children = _this.props.children;
+      return _default(children).map(_this.getNewChild);
+    };
+
+    _this.setActiveKey = function (activeKey) {
+      if (!('activeKey' in _this.props)) {
+        _this.setState({
+          activeKey: activeKey
+        });
+      }
+
+      _this.props.onChange(_this.props.accordion ? activeKey[0] : activeKey);
+    };
+
+    var activeKey = props.activeKey,
+        defaultActiveKey = props.defaultActiveKey;
+    var currentActiveKey = defaultActiveKey;
+
+    if ('activeKey' in props) {
+      currentActiveKey = activeKey;
+    }
+
+    _this.state = {
+      activeKey: getActiveKeysArray(currentActiveKey)
+    };
+    return _this;
+  }
+
+  Collapse.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+    return !shallowequal(this.props, nextProps) || !shallowequal(this.state, nextState);
+  };
+
+  Collapse.getDerivedStateFromProps = function (nextProps) {
+    var newState = {};
+
+    if ('activeKey' in nextProps) {
+      newState.activeKey = getActiveKeysArray(nextProps.activeKey);
+    }
+
+    return newState;
+  };
+
+  Collapse.prototype.render = function () {
+    var _a;
+
+    var _b = this.props,
+        prefixCls = _b.prefixCls,
+        className = _b.className,
+        style = _b.style,
+        accordion = _b.accordion;
+    var collapseClassName = classNames((_a = {}, _a[prefixCls] = true, _a[className] = !!className, _a));
+    return /*#__PURE__*/React.createElement("div", {
+      className: collapseClassName,
+      role: accordion ? 'tablist' : null,
+      style: style
+    }, this.getItems());
+  };
+
+  Collapse.defaultProps = {
+    prefixCls: 'rc-collapse',
+    onChange: function () {},
+    accordion: false,
+    destroyInactivePanel: false
+  };
+  Collapse.Panel = CollapsePanel;
+  return Collapse;
+}(React.Component);
+
+export { Collapse as default };

package/src/components/common/RcCollapse/Panel.js

@@ -0,0 +1,146 @@
+import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { __extends } from '../../../../node_modules/tslib/tslib.es6.js';
+import * as React from 'react';
+import classNames from 'classnames';
+import CSSMotion from '../../../../node_modules/rc-motion/es/CSSMotion.js';
+import '../../../../node_modules/rc-motion/es/CSSMotionList.js';
+import shallowequal from '../../../../node_modules/shallowequal/index.js';
+import PanelContent from './PanelContent.js';
+
+var CollapsePanel =
+/** @class */
+function (_super) {
+  __extends(CollapsePanel, _super);
+
+  function CollapsePanel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.onItemClick = function () {
+      var _a = _this.props,
+          onItemClick = _a.onItemClick,
+          panelKey = _a.panelKey;
+
+      if (typeof onItemClick === 'function') {
+        onItemClick(panelKey);
+      }
+    };
+
+    _this.handleKeyPress = function (e) {
+      if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
+        _this.onItemClick();
+      }
+    };
+
+    _this.renderIcon = function () {
+      var _a = _this.props,
+          showArrow = _a.showArrow,
+          expandIcon = _a.expandIcon,
+          prefixCls = _a.prefixCls,
+          collapsible = _a.collapsible;
+
+      if (!showArrow) {
+        return null;
+      }
+
+      var iconNode = typeof expandIcon === 'function' ? expandIcon(_this.props) : /*#__PURE__*/React.createElement("i", {
+        className: "arrow"
+      });
+      return iconNode && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-expand-icon"),
+        onClick: collapsible === 'header' ? _this.onItemClick : null
+      }, iconNode);
+    };
+
+    _this.renderTitle = function () {
+      var _a = _this.props,
+          header = _a.header,
+          prefixCls = _a.prefixCls,
+          collapsible = _a.collapsible;
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-header-text"),
+        onClick: collapsible === 'header' ? _this.onItemClick : null
+      }, header);
+    };
+
+    return _this;
+  }
+
+  CollapsePanel.prototype.shouldComponentUpdate = function (nextProps) {
+    return !shallowequal(this.props, nextProps);
+  };
+
+  CollapsePanel.prototype.render = function () {
+    var _a, _b;
+
+    var _c = this.props,
+        className = _c.className,
+        id = _c.id,
+        style = _c.style,
+        prefixCls = _c.prefixCls,
+        headerClass = _c.headerClass,
+        children = _c.children,
+        isActive = _c.isActive,
+        destroyInactivePanel = _c.destroyInactivePanel,
+        accordion = _c.accordion,
+        forceRender = _c.forceRender,
+        openMotion = _c.openMotion,
+        extra = _c.extra,
+        collapsible = _c.collapsible;
+    var disabled = collapsible === 'disabled';
+    var collapsibleHeader = collapsible === 'header';
+    var itemCls = classNames((_a = {}, _a["".concat(prefixCls, "-item")] = true, _a["".concat(prefixCls, "-item-active")] = isActive, _a["".concat(prefixCls, "-item-disabled")] = disabled, _a), className);
+    var headerCls = classNames("".concat(prefixCls, "-header"), (_b = {}, _b[headerClass] = headerClass, _b["".concat(prefixCls, "-header-collapsible-only")] = collapsibleHeader, _b));
+    /** header 节点属性 */
+
+    var headerProps = {
+      className: headerCls,
+      'aria-expanded': isActive,
+      'aria-disabled': disabled,
+      onKeyPress: this.handleKeyPress
+    };
+
+    if (!collapsibleHeader) {
+      headerProps.onClick = this.onItemClick;
+      headerProps.role = accordion ? 'tab' : 'button';
+      headerProps.tabIndex = disabled ? -1 : 0;
+    }
+
+    var ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
+    return /*#__PURE__*/React.createElement("div", {
+      className: itemCls,
+      id: id,
+      style: style
+    }, /*#__PURE__*/React.createElement("div", headerProps, this.renderIcon(), this.renderTitle(), ifExtraExist && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-extra")
+    }, extra)), /*#__PURE__*/React.createElement(CSSMotion, _extends({
+      leavedClassName: "".concat(prefixCls, "-content-hidden"),
+      visible: isActive
+    }, openMotion, {
+      forceRender: forceRender,
+      removeOnLeave: destroyInactivePanel
+    }), function (_a, ref) {
+      var motionClassName = _a.className,
+          motionStyle = _a.style;
+      return /*#__PURE__*/React.createElement(PanelContent, {
+        ref: ref,
+        className: motionClassName,
+        forceRender: forceRender,
+        isActive: isActive,
+        prefixCls: prefixCls,
+        role: accordion ? 'tabpanel' : null,
+        style: motionStyle
+      }, children);
+    }));
+  };
+
+  CollapsePanel.defaultProps = {
+    showArrow: true,
+    isActive: false,
+    onItemClick: function () {},
+    headerClass: '',
+    forceRender: false
+  };
+  return CollapsePanel;
+}(React.Component);
+
+export { CollapsePanel as default };

package/src/components/common/RcCollapse/PanelContent.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+/* eslint-disable no-underscore-dangle */
+var PanelContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _a;
+
+  var prefixCls = props.prefixCls,
+      forceRender = props.forceRender,
+      className = props.className,
+      style = props.style,
+      children = props.children,
+      isActive = props.isActive,
+      role = props.role;
+
+  var _b = React.useState(isActive || forceRender),
+      rendered = _b[0],
+      setRendered = _b[1];
+
+  React.useEffect(function () {
+    if (forceRender || isActive) {
+      setRendered(true);
+    }
+  }, [forceRender, isActive]);
+
+  if (!rendered) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: classNames("".concat(prefixCls, "-content"), (_a = {}, _a["".concat(prefixCls, "-content-active")] = isActive, _a["".concat(prefixCls, "-content-inactive")] = !isActive, _a), className),
+    role: role,
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content-box")
+  }, children));
+});
+PanelContent.displayName = 'PanelContent';
+
+export { PanelContent as default };

package/src/components/common/RcCollapse/index.js

@@ -0,0 +1,6 @@
+import Collapse from './Collapse.js';
+export { default } from './Collapse.js';
+
+var Panel = Collapse.Panel;
+
+export { Panel };

package/src/components/common/RcCollapse/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_rc-collapse-motion__lsK6p {\n  transition: height 0.3s, opacity 0.3s;\n  overflow: hidden;\n}\n.index_rc-collapse-content-hidden__4zwkg {\n  display: none;\n}\n.index_rc-collapse__I7hnO {\n  border-radius: 3px;\n}\n.index_rc-collapse__I7hnO > .index_rc-collapse-item__16-jp:first-child {\n  border-top: none;\n}\n.index_rc-collapse__I7hnO > .index_rc-collapse-item__16-jp > .index_rc-collapse-header__lxAi2 {\n  display: flex;\n  align-items: center;\n  line-height: 22px;\n  padding: 10px 0;\n  color: #666;\n  cursor: pointer;\n}\n.index_rc-collapse__I7hnO > .index_rc-collapse-item__16-jp > .index_rc-collapse-header__lxAi2 .index_arrow__-qPEp {\n  display: inline-block;\n  content: '\\20';\n  width: 0;\n  height: 0;\n  font-size: 0;\n  line-height: 0;\n  border-top: 3px solid transparent;\n  border-bottom: 3px solid transparent;\n  border-left: 4px solid #666;\n  vertical-align: middle;\n  margin-right: 8px;\n}\n.index_rc-collapse__I7hnO > .index_rc-collapse-item__16-jp > .index_rc-collapse-header__lxAi2 .index_rc-collapse-extra__-n4Wn {\n  margin: 0 0 0 auto;\n}\n.index_rc-collapse__I7hnO > .index_rc-collapse-item__16-jp .index_rc-collapse-header-collapsible-only__IMgg9 {\n  cursor: default;\n}\n.index_rc-collapse__I7hnO > .index_rc-collapse-item__16-jp .index_rc-collapse-header-collapsible-only__IMgg9 .index_rc-collapse-header-text__lvb2z {\n  cursor: pointer;\n}\n.index_rc-collapse__I7hnO > .index_rc-collapse-item-disabled__d6qvi > .index_rc-collapse-header__lxAi2 {\n  cursor: not-allowed;\n  color: #999;\n}\n.index_rc-collapse-content__mC-Ba {\n  color: #666;\n}\n.index_rc-collapse-content__mC-Ba > .index_rc-collapse-content-box__MvWT2 {\n  margin-bottom: 16px;\n}\n.index_rc-collapse-item__16-jp:last-child > .index_rc-collapse-content__mC-Ba {\n  border-radius: 0 0 3px 3px;\n}\n.index_rc-collapse__I7hnO > .index_rc-collapse-item-active__x9o2c > .index_rc-collapse-header__lxAi2 .index_arrow__-qPEp {\n  position: relative;\n  top: 2px;\n  border-left: 3px solid transparent;\n  border-right: 3px solid transparent;\n  border-top: 4px solid #666;\n  margin-right: 6px;\n}\n";
+styleInject(css_248z);

package/src/components/common/RcCollapse/motionUtil.js

@@ -0,0 +1,37 @@
+var getCollapsedHeight = function () {
+  return {
+    height: 0,
+    opacity: 0
+  };
+};
+
+var getRealHeight = function (node) {
+  return {
+    height: node.scrollHeight,
+    opacity: 1
+  };
+};
+
+var getCurrentHeight = function (node) {
+  return {
+    height: node === null || node === void 0 ? void 0 : node.offsetHeight
+  };
+};
+
+var skipOpacityTransition = function (_, event) {
+  return event.propertyName === 'height';
+};
+
+var collapseMotion = {
+  motionName: 'rc-collapse-motion',
+  onEnterStart: getCollapsedHeight,
+  onEnterActive: getRealHeight,
+  onLeaveStart: getCurrentHeight,
+  onLeaveActive: getCollapsedHeight,
+  onEnterEnd: skipOpacityTransition,
+  onLeaveEnd: skipOpacityTransition,
+  motionDeadline: 500,
+  leavedClassName: 'rc-collapse-content-hidden'
+};
+
+export { collapseMotion as default };