@sheinx/base 3.0.0-alpha.1 → 3.0.0-alpha.3

package/cjs/select/result.js

@@ -1,142 +1,275 @@
 "use strict";
 
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.map.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _react = require("react");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.string.trim.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.split.js");
+require("core-js/modules/es.array.map.js");
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("@sheinx/hooks");
-var _resultMore = _interopRequireDefault(require("./result-more"));
+var _resultInput = _interopRequireDefault(require("./result-input"));
+var _resultMore = _interopRequireWildcard(require("./result-more"));
+var _tag = _interopRequireDefault(require("../tag"));
 var _jsxRuntime = require("react/jsx-runtime");
-// import { Input } from '../date-picker/result';
-
-// import Tag from '../tag';
-
-var isObject = _hooks.util.isObject;
+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; }
+var isObject = _hooks.util.isObject,
+  isEmpty = _hooks.util.isEmpty,
+  isNumber = _hooks.util.isNumber,
+  getKey = _hooks.util.getKey,
+  isUnMatchedData = _hooks.util.isUnMatchedData,
+  isFunc = _hooks.util.isFunc;
 var Result = function Result(props) {
   var _jssStyle$select;
   var jssStyle = props.jssStyle,
     multiple = props.multiple,
+    size = props.size,
+    valueProp = props.value,
+    focus = props.focus,
+    keygen = props.keygen,
+    disabled = props.disabled,
+    trim = props.trim,
+    _props$closeable = props.closeable,
+    closeable = _props$closeable === void 0 ? true : _props$closeable,
+    separator = props.separator,
+    maxLength = props.maxLength,
+    placeholder = props.placeholder,
+    filterText = props.filterText,
+    inputText = props.inputText,
     compressed = props.compressed,
-    datum = props.datum,
-    data = props.data,
-    value = props.value,
-    noCache = props.noCache,
+    compressedBound = props.compressedBound,
+    compressedClassName = props.compressedClassName,
     renderUnmatched = props.renderUnmatched,
     renderResultProp = props.renderResult,
-    onCreate = props.onCreate;
-  var _useRef = (0, _react.useRef)(new Map()),
-    resultCache = _useRef.current;
+    allowOnFilter = props.allowOnFilter,
+    setInputText = props.setInputText,
+    onRef = props.onRef,
+    onFilter = props.onFilter,
+    onInputBlur = props.onInputBlur,
+    onResetFilter = props.onResetFilter,
+    onClearCreatedData = props.onClearCreatedData,
+    getDataByValues = props.getDataByValues,
+    checkUnMatched = props.checkUnMatched,
+    onRemove = props.onRemove;
+  var value = multiple ? valueProp : [valueProp];
+  var _useState = (0, _react.useState)(-1),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    more = _useState2[0],
+    setMore = _useState2[1];
+  var resultRef = (0, _react.useRef)(null);
+  var shouldResetMore = (0, _react.useRef)(false);
+  var showInput = allowOnFilter;
   var styles = jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$select = jssStyle.select) === null || _jssStyle$select === void 0 ? void 0 : _jssStyle$select.call(jssStyle);
-  var rootClass = (0, _classnames.default)(styles === null || styles === void 0 ? void 0 : styles.resultTextWrapper);
-
-  // const renderItem = () => {
-  //   return <Tag jssStyle={jssStyle}>test</Tag>;
-  // };
-
-  var handleCreate = function handleCreate(text) {
-    var createFn = typeof onCreate === 'boolean' ? function (t) {
-      return t;
-    } : onCreate;
-    return createFn === null || createFn === void 0 ? void 0 : createFn(text);
+  var rootClass = (0, _classnames.default)(styles.resultTextWrapper, compressed && styles.compressedWrapper, multiple && styles.multipleResultWrapper, multiple && compressed && styles.multipleCompressedWrapper);
+  var isCompressedBound = function isCompressedBound() {
+    return compressedBound && isNumber(compressedBound) && compressedBound >= 1;
   };
-  var getResult = function getResult(value) {
-    var prediction = props.prediction || function (v, d) {
-      return v === datum.format(d);
-    };
-    // if (treeData) return this.getTreeResult(value, prediction)
-
-    for (var i = 0, count = data.length; i < count; i++) {
-      var d = data[i];
-      if (prediction(value, d)) return d;
+  var getCompressedBound = function getCompressedBound() {
+    if (isCompressedBound()) {
+      return compressedBound;
     }
-    if (onCreate) return handleCreate(value);
-    return undefined;
+    return more;
   };
-  var getResultByValue = function getResultByValue(value) {
-    var result = noCache ? undefined : resultCache.get(value);
-    if (!result) {
-      result = getResult(value);
-      if (result !== undefined && !noCache) resultCache.set(value, result);else if (result === undefined) result = {
-        IS_NOT_MATCHED_VALUE: true,
-        value: value
-      };
-    }
-    return result;
+  var renderInput = function renderInput() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resultInput.default, {
+        jssStyle: jssStyle,
+        style: {
+          width: 12
+        },
+        value: filterText,
+        trim: trim,
+        focus: focus,
+        multiple: multiple,
+        maxLength: maxLength,
+        values: value,
+        onRef: onRef,
+        inputText: inputText,
+        onChange: onFilter,
+        onInputBlur: onInputBlur,
+        onResetFilter: onResetFilter,
+        onClearCreatedData: onClearCreatedData
+      })
+    }, 'input');
   };
-
-  // const renderInput = () => {};
-
   var renderResultContent = function renderResultContent(data) {
-    if (datum.isUnMatchedData(data)) {
-      if (typeof renderUnmatched === 'function') return renderUnmatched(data.value);
-      return isObject(data.value) ? renderResultProp(data.value) : data.value;
+    if (checkUnMatched(data)) {
+      var _data = data;
+      if (isFunc(renderUnmatched)) return renderUnmatched(_data.value);
+      return isObject(_data.value) ? renderResultProp(_data.value) : _data.value;
     }
     return renderResultProp(data);
   };
+  var renderItem = function renderItem(item, index) {
+    var key;
+    if (isUnMatchedData(item)) {
+      if (isFunc(keygen)) {
+        key = keygen(item.value, index);
+      } else {
+        key = item.value;
+      }
+    } else {
+      key = getKey(keygen, item, index);
+    }
+    var handleClose = function handleClose() {
+      onRemove(item, key, index);
+    };
+    var isDisabled;
+    if (_hooks.util.isFunc(disabled)) {
+      isDisabled = disabled(item);
+    } else {
+      isDisabled = disabled;
+    }
+    var resultClassName;
+    if (_hooks.util.isFunc(props.resultClassName)) {
+      resultClassName = props.resultClassName(key);
+    } else {
+      resultClassName = props.resultClassName;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tag.default, {
+      disabled: isDisabled,
+      size: size,
+      className: (0, _classnames.default)(styles.tag, resultClassName),
+      onClose: closeable && handleClose,
+      jssStyle: jssStyle,
+      children: renderResultContent(item)
+    }, key);
+  };
+  var isEmptyResult = function isEmptyResult() {
+    if (!value) return true;
+    // const values = (multiple ? value : [value]) as Value[];
 
-  // const isEmptyResult = () => {
-  //   if (!value) return true;
-  //   const values = multiple ? value : [value];
-
-  //   if (values.length <= 0) return true;
-  //   const hasValue =
-  //     values.findIndex((item: Value) => {
-  //       const cur = getResultByValue(item);
-  //       const r = renderResultContent(cur);
-  //       return !isEmpty(r);
-  //     }) >= 0;
-  //   return !hasValue;
-  // };
-
-  // const renderPlaceholder = () => {
-  //   // if (focus && onFilter && empty) {
-  //   //   return this.renderInput(multiple ? filterText : '');
-  //   // }
-  // };
-
+    if (value.length <= 0) return true;
+    var hasValue = getDataByValues(value).findIndex(function (item) {
+      var cur = renderResultContent(item);
+      return !isEmpty(cur);
+    }) >= 0;
+    return !hasValue;
+  };
+  var showPlaceholder = placeholder && isEmptyResult();
+  var renderNbsp = function renderNbsp() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: styles.space,
+        children: "\xA0"
+      })
+    }, 'space');
+  };
+  var renderPlaceholder = function renderPlaceholder() {
+    if (focus && showInput && showPlaceholder) {
+      return renderInput();
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)(styles.placeholder, styles.ellipsis),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: placeholder
+      })
+    });
+  };
   var renderSingleResult = function renderSingleResult() {
-    console.log(value);
-    if (!value) return null;
-    // const data = datum.getDataByValues([value]);
-    var result = getResultByValue(value);
-    var content = renderResultContent(result);
+    if (isEmptyResult()) return renderNbsp();
+    // const values = [value];
+    var result = getDataByValues(value);
+    var content = renderResultContent(result[0]);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: styles.ellipsis,
       children: content
-    });
+    }, 'single');
   };
   var renderMultipleResult = function renderMultipleResult() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)(styles === null || styles === void 0 ? void 0 : styles.resultText, styles === null || styles === void 0 ? void 0 : styles.placeholder),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: styles === null || styles === void 0 ? void 0 : styles.resultTextPadding,
-        children: "result multiple"
-      })
-    });
+    if (isEmptyResult()) return renderNbsp();
+    // [TODO] separator 处理逻辑后续交给 hooks 处理，此处临时处理
+    var nextValue = value;
+    if (separator && _hooks.util.isString(valueProp)) {
+      nextValue = valueProp.split(separator);
+    }
+    var result = getDataByValues(nextValue).map(renderItem);
+    return result;
   };
   var renderMultipleResultMore = function renderMultipleResultMore() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_resultMore.default, {});
+    var result = renderMultipleResult();
+    var moreNumber = getCompressedBound();
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_resultMore.default, {
+      keygen: keygen,
+      jssStyle: jssStyle,
+      data: result,
+      size: size,
+      more: moreNumber,
+      compressed: compressed,
+      compressedClassName: compressedClassName,
+      showNum: moreNumber
+    }, 'more');
   };
   var renderResult = function renderResult() {
+    var result = [];
     if (multiple) {
-      if (compressed) return renderMultipleResultMore();
-      return renderMultipleResult();
+      result.push(compressed ? renderMultipleResultMore() : renderMultipleResult());
+      if (showInput) {
+        result.push(renderInput());
+      } else if (result.length === 0) {
+        result.push(renderNbsp());
+      }
+    } else {
+      if (showInput) {
+        result = [renderInput()];
+      } else {
+        result.push(renderSingleResult());
+      }
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)(styles === null || styles === void 0 ? void 0 : styles.resultText, styles === null || styles === void 0 ? void 0 : styles.placeholder),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: styles === null || styles === void 0 ? void 0 : styles.resultTextPadding,
-        children: renderSingleResult()
-      })
-    });
+    return showPlaceholder ? renderPlaceholder() : result;
   };
+  var handleResetMore = function handleResetMore() {
+    if (!compressed) return;
+    shouldResetMore.current = true;
+    setMore(-1);
+  };
+  (0, _react.useEffect)(function () {
+    if (!multiple && showInput && valueProp) {
+      var result = getDataByValues(value);
+      // 获取合法的 content
+      var content = renderResultContent(result[0]);
+      // 仅在关闭下拉框时，将输入框的值设置为合法的s选中的值
+      if (!isEmpty(content) && focus === false) {
+        setInputText(content);
+      }
+    }
+    if (!resultRef.current) return;
+    if (!compressed) return;
+    if (isCompressedBound()) return;
+    handleResetMore();
+  }, [value, focus]);
+  (0, _react.useEffect)(function () {
+    if (!compressed) return;
+    if (!resultRef.current) return;
+    if (more === -1) {
+      if (shouldResetMore.current && (value || []).length) {
+        shouldResetMore.current = false;
+        var newMore = (0, _resultMore.getResetMore)(showInput, resultRef.current, resultRef.current.querySelectorAll(".".concat(styles.tag)));
+        setMore(newMore);
+      }
+    }
+  }, [value, more]);
+  (0, _react.useEffect)(function () {
+    if (!resultRef.current) return;
+    var cancelObserver = (0, _hooks.addResizeObserver)(resultRef.current, handleResetMore, {
+      direction: 'x'
+    });
+    return function () {
+      cancelObserver();
+    };
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: resultRef,
     className: rootClass,
     children: renderResult()
   });

package/cjs/select/result.type.d.ts

@@ -1,10 +1,26 @@
 /// <reference types="react" />
-import { UnMatchedData } from '@sheinx/hooks';
-import { SelectProps, DatumType } from './select.type';
+import { KeygenResult, UnMatchedData } from '@sheinx/hooks';
+import { SelectProps } from './select.type';
 export declare type ResultType<Value> = UnMatchedData | Value;
-export interface ResultProps<DataItem, Value> extends Pick<SelectProps<DataItem, Value>, 'jssStyle' | 'multiple' | 'trim' | 'placeholder' | 'innerTitle' | 'keygen' | 'data' | 'value' | 'noCache' | 'compressed' | 'compressedBound' | 'disabled' | 'prediction' | 'resultClassName' | 'renderItem' | 'renderUnmatched' | 'onCreate' | 'onFilter'> {
-    datum: DatumType<DataItem, Value>;
+export interface ResultProps<DataItem, Value> extends Pick<SelectProps<DataItem, Value>, 'jssStyle' | 'size' | 'multiple' | 'placeholder' | 'keygen' | 'value' | 'compressed' | 'compressedBound' | 'compressedClassName' | 'disabled' | 'resultClassName' | 'renderUnmatched' | 'focusSelected' | 'maxLength' | 'trim' | 'separator'> {
+    data: DataItem[];
     focus: boolean;
+    childrenKey?: keyof DataItem & string;
     renderResult: (data: DataItem, index?: number) => React.ReactNode;
+    inputText?: string;
+    filterText?: string;
+    onRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    allowOnFilter: boolean;
+    closeable?: boolean;
+    renderItem: (data: DataItem, index?: number) => React.ReactNode;
+    setInputText: (text: string) => void;
+    onCreate?: (text: string) => string | DataItem | undefined;
+    onFilter?: (text: string) => void;
+    onInputBlur?: (text?: string) => void;
+    onResetFilter: () => void;
+    onClearCreatedData: () => void;
+    getDataByValues: (values: Value[]) => (DataItem | UnMatchedData)[];
+    checkUnMatched: (item: DataItem | UnMatchedData) => boolean;
+    onRemove: (item: DataItem | UnMatchedData, key?: KeygenResult, index?: number) => void;
 }
 //# sourceMappingURL=result.type.d.ts.map

package/cjs/select/result.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"result.type.d.ts","sourceRoot":"","sources":["result.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEvD,oBAAY,UAAU,CAAC,KAAK,IAAI,aAAa,GAAG,KAAK,CAAC;AAEtD,MAAM,WAAW,WAAW,CAAC,QAAQ,EAAE,KAAK,CAC1C,SAAQ,IAAI,CACV,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,EAC1B,UAAU,GACV,UAAU,GACV,MAAM,GACN,aAAa,GACb,YAAY,GACZ,QAAQ,GACR,MAAM,GACN,OAAO,GACP,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,UAAU,GACV,YAAY,GACZ,iBAAiB,GACjB,YAAY,GACZ,iBAAiB,GACjB,UAAU,GACV,UAAU,CACb;IACD,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAClC,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACnE"}
+{"version":3,"file":"result.type.d.ts","sourceRoot":"","sources":["result.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,oBAAY,UAAU,CAAC,KAAK,IAAI,aAAa,GAAG,KAAK,CAAC;AAEtD,MAAM,WAAW,WAAW,CAAC,QAAQ,EAAE,KAAK,CAC1C,SAAQ,IAAI,CACV,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,EAC1B,UAAU,GACV,MAAM,GACN,UAAU,GACV,aAAa,GACb,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,iBAAiB,GACjB,qBAAqB,GACrB,UAAU,GACV,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,WAAW,GACX,MAAM,GACN,WAAW,CACd;IACD,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,QAAQ,GAAG,MAAM,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,SAAS,CAAC,CAAC;IAC5D,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAE/B,eAAe,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,GAAG,aAAa,CAAC,EAAE,CAAC;IACnE,cAAc,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,aAAa,KAAK,OAAO,CAAC;IAC5D,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,aAAa,EAAE,GAAG,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACxF"}

package/cjs/select/select.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SelectProps } from './select.type';
-declare const Select: <DataItem, Value>(props: SelectProps<DataItem, Value>) => JSX.Element;
+import { SelectPropsBase } from './select.type';
+declare function Select<DataItem, Value>(props: SelectPropsBase<DataItem, Value>): JSX.Element;
 export default Select;
 //# sourceMappingURL=select.d.ts.map

package/cjs/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS5C,QAAA,MAAM,MAAM,uEAgMX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["select.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,eAAe,EAAqB,MAAM,eAAe,CAAC;AAWnE,iBAAS,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,eAioBvE;AAED,eAAe,MAAM,CAAC"}