dtable-ui-component 6.0.25-alpha.4 → 6.0.26-beta

package/lib/GeolocationEditor/sm/country-editor.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _picker = _interopRequireDefault(require("antd-mobile/lib/picker"));
+var _list = _interopRequireDefault(require("antd-mobile/lib/list"));
+var _react = _interopRequireWildcard(require("react"));
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+var _lang = require("../../lang");
+const CountryEditor = _ref => {
+  let {
+    column,
+    value: oldValue,
+    getData,
+    onToggle,
+    onCommit
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)([]);
+  const [isLoading, setLoading] = (0, _react.useState)(true);
+  const locations = (0, _react.useRef)([]);
+  (0, _react.useEffect)(() => {
+    getData().then(data => {
+      locations.current = data;
+      const continent = data.find(a => a.children.find(b => b.value === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.country_region) || ''));
+      const value = [(continent === null || continent === void 0 ? void 0 : continent.value) || '', (oldValue === null || oldValue === void 0 ? void 0 : oldValue.country_region) || ''];
+      setValue(value);
+      setLoading(false);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onValueChange = (0, _react.useCallback)(newValue => {
+    if (value === newValue) return;
+    setValue(newValue);
+  }, [value]);
+  const onSubmit = (0, _react.useCallback)(() => {
+    if (value[1] !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.country_region)) {
+      onCommit({
+        country_region: value[1]
+      });
+    }
+    onToggle();
+  }, [value, oldValue, onCommit, onToggle]);
+  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+    onLeftClick: onToggle,
+    onRightClick: onSubmit,
+    onClose: onToggle
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-dtable-ui-row-expand-subtitle"
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Address_information'))), /*#__PURE__*/_react.default.createElement(_picker.default, {
+    className: "mobile-dtable-ui-geolocation-editor-picker",
+    data: isLoading ? [] : locations.current,
+    value: value,
+    format: "",
+    onChange: onValueChange,
+    cascade: true,
+    title: (0, _lang.getLocale)('Address_information'),
+    extra: (0, _lang.getLocale)('Select_location'),
+    onOk: e => onValueChange(e),
+    okText: (0, _lang.getLocale)('Done'),
+    dismissText: (0, _lang.getLocale)('Cancel'),
+    cols: 2
+  }, /*#__PURE__*/_react.default.createElement(_list.default.Item, {
+    arrow: "horizontal"
+  }, value[1] || (0, _lang.getLocale)('Select_location')))));
+};
+var _default = exports.default = CountryEditor;

package/lib/GeolocationEditor/sm/index.css

@@ -0,0 +1,11 @@
+.mobile-dtable-ui-geolocation-editor-picker .am-picker-popup-content .am-picker-popup-header-left {
+  color: #666666;
+}
+
+.mobile-dtable-ui-geolocation-editor-picker .am-picker-popup-content .am-picker-popup-title {
+  color: #212529;
+}
+
+.mobile-dtable-ui-geolocation-editor-picker .am-picker-popup-content .am-picker-popup-header-right {
+  color: #e5a252;
+}

package/lib/GeolocationEditor/sm/index.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dtableUtils = require("dtable-utils");
+var _countryEditor = _interopRequireDefault(require("./country-editor"));
+var _provinceEditor = _interopRequireDefault(require("./province-editor"));
+var _provinceCityEditor = _interopRequireDefault(require("./province-city-editor"));
+var _locationEditor = _interopRequireDefault(require("./location-editor"));
+var _mapEditor = _interopRequireDefault(require("./map-editor"));
+var _mapSelectionEditor = _interopRequireDefault(require("./map-selection-editor"));
+require("./index.css");
+const transLocationData = data => {
+  if (Object.prototype.toString.call(data) === '[object Object]') {
+    const name = data.name;
+    data.label = name;
+    data.value = name;
+    data.name = null;
+    if (data.children) {
+      data.children.map(child => {
+        return transLocationData(child);
+      });
+    }
+  }
+  return data.children;
+};
+const transCountryData = data => {
+  let _data = [];
+  for (let key in data) {
+    let obj = {};
+    let children = [];
+    obj.label = key;
+    obj.value = key;
+    obj.name = null;
+    data[key].forEach(item => {
+      let obj = {};
+      obj.label = item;
+      obj.value = item;
+      obj.name = null;
+      children.push(obj);
+    });
+    obj.children = children;
+    _data.push(obj);
+  }
+  return _data;
+};
+const Small = _ref => {
+  let {
+    column,
+    config,
+    getLocationData,
+    getCountryData,
+    ...props
+  } = _ref;
+  const format = (0, _react.useMemo)(() => {
+    let data = column.data || {};
+    return data.geo_format ? data.geo_format : _dtableUtils.DEFAULT_GEOLOCATION_FORMAT;
+  }, [column]);
+  const getData = (0, _react.useCallback)(() => {
+    return getLocationData().then(data => transLocationData(data));
+  }, [getLocationData]);
+  const _getCountryData = (0, _react.useCallback)(() => {
+    const columnData = column.data || {};
+    const lang = columnData.lang === 'cn' ? 'cn' : 'en';
+    return getCountryData(lang).then(data => transCountryData(data));
+  }, [column, getCountryData]);
+  switch (format) {
+    case _dtableUtils.GEOLOCATION_FORMAT.LNG_LAT:
+      {
+        return /*#__PURE__*/_react.default.createElement(_mapEditor.default, Object.assign({}, props, {
+          config: config,
+          column: column
+        }));
+      }
+    case _dtableUtils.GEOLOCATION_FORMAT.MAP_SELECTION:
+      {
+        return /*#__PURE__*/_react.default.createElement(_mapSelectionEditor.default, Object.assign({}, props, {
+          config: config,
+          column: column
+        }));
+      }
+    case _dtableUtils.GEOLOCATION_FORMAT.COUNTRY_REGION:
+      {
+        return /*#__PURE__*/_react.default.createElement(_countryEditor.default, Object.assign({}, props, {
+          getData: _getCountryData,
+          column: column
+        }));
+      }
+    case _dtableUtils.GEOLOCATION_FORMAT.PROVINCE:
+      {
+        return /*#__PURE__*/_react.default.createElement(_provinceEditor.default, Object.assign({}, props, {
+          getData: getData,
+          column: column
+        }));
+      }
+    case _dtableUtils.GEOLOCATION_FORMAT.PROVINCE_CITY:
+      {
+        return /*#__PURE__*/_react.default.createElement(_provinceCityEditor.default, Object.assign({}, props, {
+          getData: getData,
+          column: column
+        }));
+      }
+    case _dtableUtils.GEOLOCATION_FORMAT.PROVINCE_CITY_DISTRICT:
+      {
+        return /*#__PURE__*/_react.default.createElement(_locationEditor.default, Object.assign({}, props, {
+          getData: getData,
+          column: column
+        }));
+      }
+    default:
+      {
+        return /*#__PURE__*/_react.default.createElement(_locationEditor.default, Object.assign({}, props, {
+          isShowDetails: true,
+          getData: getData,
+          column: column
+        }));
+      }
+  }
+};
+var _default = exports.default = Small;

package/lib/GeolocationEditor/sm/location-editor.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _inputItem = _interopRequireDefault(require("antd-mobile/lib/input-item"));
+var _picker = _interopRequireDefault(require("antd-mobile/lib/picker"));
+var _list = _interopRequireDefault(require("antd-mobile/lib/list"));
+var _react = _interopRequireWildcard(require("react"));
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+var _lang = require("../../lang");
+var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
+const LocationEditor = _ref => {
+  let {
+    isShowDetails,
+    column,
+    value: oldValue,
+    getData,
+    onToggle,
+    onCommit
+  } = _ref;
+  let initValue = [(oldValue === null || oldValue === void 0 ? void 0 : oldValue.province) || '', (oldValue === null || oldValue === void 0 ? void 0 : oldValue.city) || '', (oldValue === null || oldValue === void 0 ? void 0 : oldValue.district) || ''];
+  if (isShowDetails) {
+    initValue.push((oldValue === null || oldValue === void 0 ? void 0 : oldValue.detail) || '');
+  }
+  const [value, setValue] = (0, _react.useState)(initValue);
+  const [isLoading, setLoading] = (0, _react.useState)(true);
+  const locations = (0, _react.useRef)([]);
+  (0, _react.useEffect)(() => {
+    getData().then(data => {
+      locations.current = data;
+      console.log(data);
+      setLoading(false);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onValueChange = (0, _react.useCallback)(newValue => {
+    if (value === newValue) return;
+    setValue(newValue);
+  }, [value]);
+  const onAddressChange = (0, _react.useCallback)(address => {
+    const newValue = value.slice(0, 3);
+    newValue.push(address);
+    setValue(newValue);
+  }, [value]);
+  const onSubmit = (0, _react.useCallback)(() => {
+    let newValue = {
+      province: value[0],
+      city: value[1],
+      district: value[2]
+    };
+    if (isShowDetails) {
+      newValue['detail'] = value[3];
+    }
+    if (!_objectUtils.default.isSameObject(newValue, oldValue)) {
+      onCommit(newValue);
+    }
+    onToggle();
+  }, [isShowDetails, value, oldValue, onCommit, onToggle]);
+  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+    onLeftClick: onToggle,
+    onRightClick: onSubmit,
+    onToggle: onToggle
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Submit')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-dtable-ui-row-expand-subtitle"
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Address_information'))), /*#__PURE__*/_react.default.createElement(_picker.default, {
+    className: "mobile-dtable-ui-geolocation-editor-picker",
+    data: isLoading ? [] : locations.current,
+    value: value.slice(0, 3),
+    format: "",
+    onChange: onValueChange,
+    cascade: true,
+    title: (0, _lang.getLocale)('Address_information'),
+    extra: (0, _lang.getLocale)('Select_location'),
+    onOk: e => onValueChange(e),
+    okText: (0, _lang.getLocale)('Done'),
+    dismissText: (0, _lang.getLocale)('Cancel'),
+    cols: 3
+  }, /*#__PURE__*/_react.default.createElement(_list.default.Item, {
+    arrow: "horizontal"
+  }, value.slice(0, 3).join(' ') || (0, _lang.getLocale)('Select_location'))), isShowDetails && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobile-dtable-ui-row-expand-subtitle"
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Detailed_address'))), /*#__PURE__*/_react.default.createElement(_inputItem.default, {
+    placeholder: (0, _lang.getLocale)('Detailed_address_placeholder'),
+    value: value[3],
+    onChange: onAddressChange,
+    moneyKeyboardAlign: "left"
+  }))));
+};
+var _default = exports.default = LocationEditor;

package/lib/GeolocationEditor/sm/map-editor/index.css

@@ -0,0 +1,11 @@
+.mobile-dtable-ui-geolocation-map-editor .mobile-dtable-ui-geolocation-map-editor-input-container {
+  height: 60px;
+  padding-top: 16px;
+  width: 100%;
+}
+
+.mobile-dtable-ui-geolocation-map-editor .mobile-dtable-ui-geolocation-map-editor-map {
+  flex: 1;
+  overflow: hidden;
+  width: 100%;
+}