antd-mobile 5.0.0-rc.9 → 5.0.0

package/cjs/components/picker/picker.js

@@ -13,7 +13,7 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _nativeProps = require("../../utils/native-props");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
 var _pickerView = _interopRequireDefault(require("../picker-view"));
 
@@ -25,56 +25,51 @@ var _usePickerValueExtend = require("../picker-view/use-picker-value-extend");
 
 var _ahooks = require("ahooks");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _safeArea = _interopRequireDefault(require("../safe-area"));
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-var classPrefix = "adm-picker";
-var defaultProps = {
-  defaultValue: []
+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; }
+
+const classPrefix = `adm-picker`;
+const defaultProps = {
+  defaultValue: [],
+  closeOnMaskClick: true
 };
-var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
+const Picker = (0, _react.memo)(p => {
   var _a;
 
-  var _useConfig = (0, _configProvider.useConfig)(),
-      locale = _useConfig.locale;
-
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, {
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, {
     confirmText: locale.common.confirm,
     cancelText: locale.common.cancel
   }, p);
-
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(Object.assign(Object.assign({}, props), {
-    onChange: function onChange(val) {
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)(Object.assign(Object.assign({}, props), {
+    onChange: val => {
       var _a;
 
       (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, generateValueExtend(val));
     }
-  })),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1]; // TODO: columns generated twice in Picker and PickerView, which can be improved
-
-
-  var columns = (0, _useColumns.useColumns)(props.columns, value);
-  var generateValueExtend = (0, _usePickerValueExtend.usePickerValueExtend)(columns);
-
-  var _useState = (0, _react.useState)(value),
-      innerValue = _useState[0],
-      setInnerValue = _useState[1];
+  })); // TODO: columns generated twice in Picker and PickerView, which can be improved
 
-  (0, _react.useEffect)(function () {
+  const columns = (0, _useColumns.useColumns)(props.columns, value);
+  const generateValueExtend = (0, _usePickerValueExtend.usePickerValueExtend)(columns);
+  const [innerValue, setInnerValue] = (0, _react.useState)(value);
+  (0, _react.useEffect)(() => {
     if (innerValue !== value) {
       setInnerValue(value);
     }
   }, [props.visible]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (!props.visible) {
       setInnerValue(value);
     }
   }, [value]);
-  var onChange = (0, _ahooks.useMemoizedFn)(function (val, ext) {
+  const onChange = (0, _ahooks.useMemoizedFn)((val, ext) => {
     var _a;
 
     setInnerValue(val);
@@ -83,42 +78,44 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
       (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
     }
   });
-  var pickerElement = (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  const pickerElement = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-header"
-  }, /*#__PURE__*/_react["default"].createElement("a", {
-    className: classPrefix + "-header-button",
-    onClick: function onClick() {
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-header`
+  }, _react.default.createElement("a", {
+    className: `${classPrefix}-header-button`,
+    onClick: () => {
       var _a, _b;
 
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
       (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
     }
-  }, props.cancelText), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-header-title"
-  }, props.title), /*#__PURE__*/_react["default"].createElement("a", {
-    className: classPrefix + "-header-button",
-    onClick: function onClick() {
+  }, props.cancelText), _react.default.createElement("div", {
+    className: `${classPrefix}-header-title`
+  }, props.title), _react.default.createElement("a", {
+    className: `${classPrefix}-header-button`,
+    onClick: () => {
       var _a;
 
       setValue(innerValue);
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
     }
-  }, props.confirmText)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-body"
-  }, /*#__PURE__*/_react["default"].createElement(_pickerView["default"], {
+  }, props.confirmText)), _react.default.createElement("div", {
+    className: `${classPrefix}-body`
+  }, _react.default.createElement(_pickerView.default, {
     columns: props.columns,
     value: innerValue,
     onChange: onChange
   }))));
 
-  var popupElement = /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+  const popupElement = _react.default.createElement(_popup.default, {
+    className: `${classPrefix}-popup`,
     visible: props.visible,
     position: 'bottom',
-    onMaskClick: function onMaskClick() {
+    onMaskClick: () => {
       var _a, _b;
 
+      if (!props.closeOnMaskClick) return;
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
       (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
     },
@@ -129,9 +126,11 @@ var Picker = /*#__PURE__*/(0, _react.memo)(function (p) {
     onClick: props.onClick,
     forceRender: true,
     stopPropagation: props.stopPropagation
-  }, pickerElement);
+  }, pickerElement, _react.default.createElement(_safeArea.default, {
+    position: 'bottom'
+  }));
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
+  return _react.default.createElement(_react.default.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
 });
 exports.Picker = Picker;
 Picker.displayName = 'Picker';

package/cjs/components/picker/prompt.js

@@ -11,33 +11,33 @@ var _renderToBody = require("../../utils/render-to-body");
 
 var _picker = require("./picker");
 
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _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 prompt(props) {
-  return new Promise(function (resolve) {
-    var Wrapper = function Wrapper() {
-      var _useState = (0, _react.useState)(false),
-          visible = _useState[0],
-          setVisible = _useState[1];
-
-      (0, _react.useEffect)(function () {
+  return new Promise(resolve => {
+    const Wrapper = () => {
+      const [visible, setVisible] = (0, _react.useState)(false);
+      (0, _react.useEffect)(() => {
         setVisible(true);
       }, []);
-      return /*#__PURE__*/_react["default"].createElement(_picker.Picker, Object.assign({}, props, {
+      return _react.default.createElement(_picker.Picker, Object.assign({}, props, {
         visible: visible,
-        onConfirm: function onConfirm(val) {
+        onConfirm: (val, extend) => {
+          var _a;
+
+          (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
           resolve(val);
         },
-        onClose: function onClose() {
+        onClose: () => {
           var _a;
 
           (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
           setVisible(false);
           resolve(null);
         },
-        afterClose: function afterClose() {
+        afterClose: () => {
           var _a;
 
           (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -46,6 +46,6 @@ function prompt(props) {
       }));
     };
 
-    var unmount = (0, _renderToBody.renderToBody)( /*#__PURE__*/_react["default"].createElement(Wrapper, null));
+    const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, null));
   });
 }

package/cjs/components/picker-view/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _pickerView = require("./picker-view");
 
 require("./picker-view.css");
 
 var _default = _pickerView.PickerView;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/picker-view/picker-view.css

@@ -1,5 +1,6 @@
 .adm-picker-view {
   --height: 240px;
+  --item-font-size: 16px;
   height: var(--height);
   width: 100%;
   display: flex;
@@ -39,7 +40,7 @@
   bottom: -100vh;
 }
 .adm-picker-view-column-item {
-  font-size: 16px;
+  font-size: var(--item-font-size);
   padding: 0 6px;
   height: 34px;
   display: flex;
@@ -59,6 +60,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  z-index: 0;
 }
 .adm-picker-view-column-accessible > * {
   flex: 1;
@@ -75,7 +77,7 @@
 }
 .adm-picker-view-mask {
   position: absolute;
-  z-index: 100;
+  z-index: 10000;
   left: 0;
   top: 0;
   width: 100%;
@@ -96,8 +98,8 @@
   border-bottom: solid 1px var(--adm-border-color);
 }
 .adm-picker-view-mask-top {
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.7) 50%, #ffffff);
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
 }
 .adm-picker-view-mask-bottom {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 50%, #ffffff);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff);
 }

package/cjs/components/picker-view/picker-view.d.ts

@@ -14,5 +14,5 @@ export declare type PickerViewProps = {
     value?: PickerValue[];
     defaultValue?: PickerValue[];
     onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
-} & NativeProps<'--height'>;
+} & NativeProps<'--height' | '--item-font-size'>;
 export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

package/cjs/components/picker-view/picker-view.js

@@ -19,22 +19,18 @@ var _usePickerValueExtend = require("./use-picker-value-extend");
 
 var _ahooks = require("ahooks");
 
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _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; }
 
-var classPrefix = "adm-picker-view";
-var defaultProps = {
+const classPrefix = `adm-picker-view`;
+const defaultProps = {
   defaultValue: []
 };
-var PickerView = /*#__PURE__*/(0, _react.memo)(function (p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-
-  var _useState = (0, _react.useState)(props.value === undefined ? props.defaultValue : props.value),
-      innerValue = _useState[0],
-      setInnerValue = _useState[1];
-
-  (0, _ahooks.useDebounceEffect)(function () {
+const PickerView = (0, _react.memo)(p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [innerValue, setInnerValue] = (0, _react.useState)(props.value === undefined ? props.defaultValue : props.value);
+  (0, _ahooks.useDebounceEffect)(() => {
     var _a;
 
     if (props.value === innerValue) return;
@@ -45,50 +41,48 @@ var PickerView = /*#__PURE__*/(0, _react.memo)(function (p) {
     trailing: true
   }); // Sync `value` to `innerValue`
 
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (props.value === undefined) return; // Uncontrolled mode
 
     if (props.value === innerValue) return;
     setInnerValue(props.value);
   }, [props.value]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     if (props.value === innerValue) return;
-    var timeout = window.setTimeout(function () {
+    const timeout = window.setTimeout(() => {
       if (props.value !== undefined && props.value !== innerValue) {
         setInnerValue(props.value);
       }
     }, 1000);
-    return function () {
+    return () => {
       window.clearTimeout(timeout);
     };
   }, [props.value, innerValue]);
-  var columns = (0, _useColumns.useColumns)(props.columns, innerValue);
-  var generateValueExtend = (0, _usePickerValueExtend.usePickerValueExtend)(columns);
-  var handleSelect = (0, _react.useCallback)(function (val, index) {
-    setInnerValue(function (prev) {
-      var next = [].concat(prev);
+  const columns = (0, _useColumns.useColumns)(props.columns, innerValue);
+  const generateValueExtend = (0, _usePickerValueExtend.usePickerValueExtend)(columns);
+  const handleSelect = (0, _react.useCallback)((val, index) => {
+    setInnerValue(prev => {
+      const next = [...prev];
       next[index] = val;
       return next;
     });
   }, []);
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "" + classPrefix
-  }, columns.map(function (column, index) {
-    return /*#__PURE__*/_react["default"].createElement(_wheel.Wheel, {
-      key: index,
-      index: index,
-      column: column,
-      value: innerValue[index],
-      onSelect: handleSelect
-    });
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-mask"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-mask-top"
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-mask-middle"
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-mask-bottom"
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: `${classPrefix}`
+  }, columns.map((column, index) => _react.default.createElement(_wheel.Wheel, {
+    key: index,
+    index: index,
+    column: column,
+    value: innerValue[index],
+    onSelect: handleSelect
+  })), _react.default.createElement("div", {
+    className: `${classPrefix}-mask`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-mask-top`
+  }), _react.default.createElement("div", {
+    className: `${classPrefix}-mask-middle`
+  }), _react.default.createElement("div", {
+    className: `${classPrefix}-mask-bottom`
   }))));
 });
 exports.PickerView = PickerView;

package/cjs/components/picker-view/use-columns.js

@@ -8,15 +8,11 @@ exports.useColumns = useColumns;
 var _react = require("react");
 
 function useColumns(rawColumns, value) {
-  return (0, _react.useMemo)(function () {
-    var columns = typeof rawColumns === 'function' ? rawColumns(value) : rawColumns;
-    return columns.map(function (column) {
-      return column.map(function (item) {
-        return typeof item === 'string' ? {
-          label: item,
-          value: item
-        } : item;
-      });
-    });
+  return (0, _react.useMemo)(() => {
+    const columns = typeof rawColumns === 'function' ? rawColumns(value) : rawColumns;
+    return columns.map(column => column.map(item => typeof item === 'string' ? {
+      label: item,
+      value: item
+    } : item));
   }, [rawColumns, value]);
 }

package/cjs/components/picker-view/use-picker-value-extend.js

@@ -9,23 +9,19 @@ var _react = require("react");
 
 var _memoize = _interopRequireDefault(require("lodash/memoize"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function usePickerValueExtend(columns) {
-  var generateItems = (0, _react.useMemo)(function () {
-    return (0, _memoize["default"])(function (val) {
-      return val.map(function (v, index) {
+  const generateItems = (0, _react.useMemo)(() => {
+    return (0, _memoize.default)(val => {
+      return val.map((v, index) => {
         var _a;
 
-        var column = columns[index];
+        const column = columns[index];
         if (!column) return null;
-        return (_a = column.find(function (item) {
-          return item.value === v;
-        })) !== null && _a !== void 0 ? _a : null;
+        return (_a = column.find(item => item.value === v)) !== null && _a !== void 0 ? _a : null;
       });
-    }, function (val) {
-      return JSON.stringify(val);
-    });
+    }, val => JSON.stringify(val));
   }, [columns]);
 
   function generateValueExtend(val) {