@fonixtree/magic-design 2.0.170 → 2.0.172

package/lib/meta-comp/config-panels/ButtonConfig/BorderRadiusInput/index.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.less");
+
+var _antd = require("antd4");
+
+var _common = require("../../../../common");
+
+var _locale = require("../../../../locale");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var BorderRadiusInput =
+/** @class */
+function (_super) {
+  __extends(BorderRadiusInput, _super);
+
+  function BorderRadiusInput() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      open: false,
+      value1: 0,
+      value2: 0,
+      value3: 0,
+      value4: 0,
+      showValue: ''
+    };
+
+    _this.updateValue = function (v, e) {
+      var _a;
+
+      var onChange = _this.props.onChange;
+
+      _this.setState((_a = {}, _a[v] = e.target.value, _a), function () {
+        var _a = _this.state,
+            value1 = _a.value1,
+            value2 = _a.value2,
+            value3 = _a.value3,
+            value4 = _a.value4;
+        onChange((value1 || 0) + "px " + (value2 || 0) + "px " + (value4 || 0) + "px " + (value3 || 0) + "px");
+
+        _this.setState({
+          showValue: value1 == value2 && value1 == value3 && value1 == value4 ? value1 : (0, _locale.i18n)('MIXED')
+        });
+      });
+    };
+
+    return _this;
+  }
+
+  BorderRadiusInput.prototype.componentDidMount = function () {
+    var value = this.props.value;
+    var arr = typeof value === 'number' ? [value] : value.split(' ');
+    var first = arr[0],
+        second = arr[1],
+        three = arr[2],
+        four = arr[3];
+    this.setState({
+      value1: parseInt(first),
+      value2: parseInt(second || first),
+      value3: parseInt(three || first),
+      value4: parseInt(four || first),
+      showValue: typeof value === 'number' || first == second && first == three && first == four ? parseInt(first) : (0, _locale.i18n)('MIXED')
+    });
+  };
+
+  BorderRadiusInput.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.state,
+        open = _a.open,
+        showValue = _a.showValue,
+        value1 = _a.value1,
+        value2 = _a.value2,
+        value3 = _a.value3,
+        value4 = _a.value4;
+
+    var menu = /*#__PURE__*/_react["default"].createElement(_antd.Menu, {
+      onClick: function onClick() {}
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, null, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#848484",
+      size: 24,
+      type: "icon-border-radius"
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      onChange: function onChange(e) {
+        return _this.updateValue('value1', e);
+      },
+      type: "text",
+      value: value1
+    })), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, null, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      className: "border-radius-rotate2",
+      color: "#848484",
+      size: 24,
+      type: "icon-border-radius"
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      onChange: function onChange(e) {
+        return _this.updateValue('value2', e);
+      },
+      type: "text",
+      value: value2
+    })), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, null, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      className: "border-radius-rotate3",
+      color: "#848484",
+      size: 24,
+      type: "icon-border-radius"
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      onChange: function onChange(e) {
+        return _this.updateValue('value3', e);
+      },
+      type: "text",
+      value: value3
+    })), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, null, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      className: "border-radius-rotate4",
+      color: "#848484",
+      size: 24,
+      type: "icon-border-radius"
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      onChange: function onChange(e) {
+        return _this.updateValue('value4', e);
+      },
+      type: "text",
+      value: value4
+    })));
+
+    return /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
+      open: open,
+      overlay: menu,
+      overlayClassName: "m-border-radius-dropdown",
+      placement: "bottomLeft"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('m-border-radius-input')
+    }, open && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "common_mask",
+      onClick: function onClick() {
+        return _this.setState({
+          open: false
+        });
+      }
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "input"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#848484",
+      size: 24,
+      type: "icon-border-radius"
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "value"
+    }, showValue)), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('m-icon-corner', {
+        active: open
+      }),
+      onClick: function onClick() {
+        _this.setState({
+          open: !open
+        });
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#000",
+      size: 32,
+      type: "icon-corner"
+    }))));
+  };
+
+  BorderRadiusInput.defaultProps = {
+    value: '',
+    onChange: function onChange() {}
+  };
+  return BorderRadiusInput;
+}(_react["default"].Component);
+
+var _default = BorderRadiusInput;
+exports["default"] = _default;

package/lib/meta-comp/config-panels/ButtonConfig/BorderRadiusInput/index.less

@@ -0,0 +1,81 @@
+.m-border-radius-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .input {
+    height: 48px;
+    width: 83%;
+    background: #FFFFFF;
+    border: 1px solid #D2D9E5;
+    border-radius: 8px;
+    padding: 8px 16px;
+    align-items: center;
+
+    .value {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      color: #232F46;
+      margin-left: 10px;
+    }
+  }
+
+  .m-icon-corner {
+    cursor: pointer;
+    display: inline-block;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    padding: 2px;
+    background-color: transparent;
+
+    &.active {
+      background-color: #ddd;
+    }
+  }
+}
+
+.m-border-radius-dropdown {
+
+  .cylon-dropdown-menu {
+    display: flex;
+    flex-wrap: wrap;
+
+    .cylon-dropdown-menu-item-active {
+      background-color: transparent;
+      color: #232F46 !important;
+    }
+
+    li {
+      width: 50%;
+
+      .cylon-dropdown-menu-title-content {
+        display: flex;
+
+        .border-radius-rotate2 {
+          transform: rotate(90deg);
+        }
+
+        .border-radius-rotate3 {
+          transform: rotate(270deg);
+        }
+
+        .border-radius-rotate4 {
+          transform: rotate(180deg);
+        }
+
+        input {
+          width: 80%;
+          outline: none;
+          border: 1px solid #D2D9E5;
+          padding: 4px 8px;
+          border-radius: 8px;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+}

package/lib/meta-comp/config-panels/ButtonConfig/index.js

@@ -13,6 +13,8 @@ require("./index.less");
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
+var _BorderRadiusInput = _interopRequireDefault(require("./BorderRadiusInput"));
+
 var _locale = require("../../../locale");
 
 var _SpacingConfig = _interopRequireDefault(require("../../../composite-comp/common/config-panels/SpacingConfig"));
@@ -251,16 +253,13 @@ function (_super) {
         value: _data.borderColor
       })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('BORDER_RADIUS')
-      }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
-        maxVal: 20,
-        onChange: function onChange(_a) {
-          var count = _a.count;
+      }, /*#__PURE__*/_react["default"].createElement(_BorderRadiusInput["default"], {
+        onChange: function onChange(v) {
+          console.log(v);
 
-          _this.updateAttr(_data, 'borderRadius', count);
+          _this.updateAttr(_data, 'borderRadius', v);
         },
-        value: {
-          count: _data.borderRadius
-        }
+        value: _data.borderRadius
       })));
     };
 

package/lib/utils/commonUtil.js

@@ -23,7 +23,7 @@ exports.isLogin = isLogin;
 exports.navigateBack = navigateBack;
 exports.onListenTouch = exports.nextTick = exports.navigateTo = void 0;
 exports.pushGA = pushGA;
-exports.setDefaultAddressFromIP = exports.pxToRem = void 0;
+exports.setDefaultAddressFromIP = exports.reverseStrArr = exports.pxToRem = void 0;
 exports.shareFacebook = shareFacebook;
 exports.shareLinkedin = shareLinkedin;
 exports.shareTwitter = shareTwitter;
@@ -505,13 +505,25 @@ var getUrlParams = function getUrlParams(name) {
   if (r != null) return unescape(r[2]);
   return null;
 };
+
+exports.getUrlParams = getUrlParams;
+
+var reverseStrArr = function reverseStrArr(arr) {
+  var locale = (0, _storeUtil.getStore)(_constants.STORAGE_KEY.FISHX_LOCALE) || (0, _storeUtil.getStore)(_constants.STORAGE_KEY.LOCALE);
+
+  if (locale === 'ba') {
+    return arr.reverse().join(' ').replace('+ ', '+').replace(': ', ':');
+  }
+
+  return arr.join(' ').replace(' +', '+').replace(' :', ':');
+};
 /**
  * 补0 函数
  * @param {*} num 数字
  */
 
 
-exports.getUrlParams = getUrlParams;
+exports.reverseStrArr = reverseStrArr;
 
 var addZero = function addZero(num) {
   return String(num).length === 1 ? "0" + String(num) : String(num);
@@ -938,16 +950,16 @@ var pxToRem = function pxToRem(styleObj) {
     if (styleObj.hasOwnProperty(key)) {
       var value = styleObj[key];
 
-      if (typeof value === 'string' && value.endsWith('px')) {
+      if ((key === 'padding' || key === 'margin' || key === 'borderRadius') && typeof value === 'string') {
+        var values = value.split(' ');
+        var remValues = values.map(function (value) {
+          return value.endsWith('px') ? convertToRem(value) : value;
+        });
+        remObj[key] = remValues.join(' ');
+      } else if (typeof value === 'string' && value.endsWith('px')) {
         remObj[key] = convertToRem(value.split('px')[0]);
       } else if (typeof value === 'number') {
         remObj[key] = ['opacity', 'lineHeight', 'zIndex', 'fontWeight'].includes(key) ? value : convertToRem(value);
-      } else if ((key === 'padding' || key === 'margin') && typeof value === 'string') {
-        var paddingValues = value.split(' ');
-        var remPaddingValues = paddingValues.map(function (paddingValue) {
-          return paddingValue.endsWith('px') ? convertToRem(paddingValue) : paddingValue;
-        });
-        remObj[key] = remPaddingValues.join(' ');
       } else {
         remObj[key] = value;
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "2.0.170",
+  "version": "2.0.172",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",

package/es/composite-comp/bol/components/Location/defaultJSON.js

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getDefaultJSON = void 0;
-
-var _uuid = require("uuid");
-
-var getDefaultJSON = function getDefaultJSON() {
-  var groupId = (0, _uuid.v4)();
-  return {
-    id: groupId,
-    type: 'LOCATION',
-    logo: {
-      parentId: groupId,
-      id: (0, _uuid.v4)(),
-      open: true,
-      color: '#fff'
-    },
-    address: {
-      parentId: groupId,
-      id: (0, _uuid.v4)(),
-      open: true
-    },
-    icon: {
-      parentId: groupId,
-      id: (0, _uuid.v4)(),
-      open: true,
-      color: '#fff'
-    },
-    spacing: {
-      pc: {
-        paddingTop: 10,
-        paddingBottom: 10,
-        marginBottom: 0
-      },
-      mobile: {
-        paddingTop: 12,
-        paddingBottom: 12,
-        paddingLeft: 12,
-        marginBottom: 0
-      }
-    },
-    customize: {
-      layout: {
-        pcLayout: 'top',
-        h5Layout: 'top'
-      }
-    },
-    background: {
-      opacity: 100,
-      color: '#597EF7',
-      image: '',
-      bgType: 'color'
-    }
-  };
-};
-
-exports.getDefaultJSON = getDefaultJSON;

package/es/composite-comp/bol/components/Location/index.js

@@ -1,102 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _defaultJSON = require("./defaultJSON");
-
-var _common = require("../../../../common");
-
-var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
-
-var _locale = require("../../../../locale");
-
-require("./index.less");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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); }
-
-var __extends = void 0 && (void 0).__extends || function () {
-  var _extendStatics = function extendStatics(d, b) {
-    _extendStatics = Object.setPrototypeOf || {
-      __proto__: []
-    } instanceof Array && function (d, b) {
-      d.__proto__ = b;
-    } || function (d, b) {
-      for (var p in b) {
-        if (b.hasOwnProperty(p)) d[p] = b[p];
-      }
-    };
-
-    return _extendStatics(d, b);
-  };
-
-  return function (d, b) {
-    _extendStatics(d, b);
-
-    function __() {
-      this.constructor = d;
-    }
-
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  };
-}();
-
-var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
-  var c = arguments.length,
-      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
-      d;
-  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
-    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  }
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-
-var CustomCode =
-/** @class */
-function (_super) {
-  __extends(CustomCode, _super);
-
-  function CustomCode() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-
-  CustomCode.prototype.componentDidMount = function () {};
-
-  CustomCode.prototype.render = function () {
-    var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null) : /*#__PURE__*/_react["default"].createElement("div", {
-      className: "location-mobile"
-    }, nodeData.logo.open && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      className: "logo",
-      color: nodeData.logo.color,
-      size: 20,
-      type: "icon-MapPin"
-    }), nodeData.address.open && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "address"
-    }, (0, _locale.i18n)('DISPLAY_LOCATION_ADDRESS')), nodeData.icon.open && /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      className: "logo",
-      color: nodeData.icon.color,
-      size: 16,
-      type: "icon-outlined-right"
-    })));
-  };
-
-  CustomCode.defaultProps = {};
-  CustomCode.type = 'LOCATION';
-  CustomCode.getDefaultJSON = _defaultJSON.getDefaultJSON;
-  CustomCode = __decorate([_compositeDecorator["default"]], CustomCode);
-  return CustomCode;
-}(_react.Component);
-
-var _default = CustomCode;
-exports["default"] = _default;

package/es/composite-comp/bol/components/Location/index.less

@@ -1,15 +0,0 @@
-.location-mobile {
-  display: flex;
-  align-items: center;
-  .logo {
-    margin-right: 6px;
-  }
-  .address {
-    font-family: Open Sans;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 18px;
-    color: #fff;
-  }
-  
-}

package/lib/composite-comp/bol/components/Location/defaultJSON.js

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getDefaultJSON = void 0;
-
-var _uuid = require("uuid");
-
-var getDefaultJSON = function getDefaultJSON() {
-  var groupId = (0, _uuid.v4)();
-  return {
-    id: groupId,
-    type: 'LOCATION',
-    logo: {
-      parentId: groupId,
-      id: (0, _uuid.v4)(),
-      open: true,
-      color: '#fff'
-    },
-    address: {
-      parentId: groupId,
-      id: (0, _uuid.v4)(),
-      open: true
-    },
-    icon: {
-      parentId: groupId,
-      id: (0, _uuid.v4)(),
-      open: true,
-      color: '#fff'
-    },
-    spacing: {
-      pc: {
-        paddingTop: 10,
-        paddingBottom: 10,
-        marginBottom: 0
-      },
-      mobile: {
-        paddingTop: 12,
-        paddingBottom: 12,
-        paddingLeft: 12,
-        marginBottom: 0
-      }
-    },
-    customize: {
-      layout: {
-        pcLayout: 'top',
-        h5Layout: 'top'
-      }
-    },
-    background: {
-      opacity: 100,
-      color: '#597EF7',
-      image: '',
-      bgType: 'color'
-    }
-  };
-};
-
-exports.getDefaultJSON = getDefaultJSON;