assui 3.1.38 → 3.1.40

package/es/condition-select-input/index.d.ts

@@ -25,7 +25,10 @@ export interface ConditionSelectInputProps {
     conditionInputProps?: ConditionInputProps;
     /** 联动selectProps */
     conditionSelectProps?: SelectProps;
+    /** onChange */
     onChange?: (value: ValueType) => void;
+    /** onBlur */
+    onBlur?: (value: ValueType) => void;
     /** 输入框类型 */
     inputType?: InputTypeEnum;
     /** select options */

package/es/condition-select-input/index.js

@@ -55,7 +55,8 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
     _b = props.inputType,
     inputType = _b === void 0 ? InputTypeEnum.CONDITION_INPUT : _b,
     _c = props.optionsList,
-    optionsList = _c === void 0 ? [] : _c;
+    optionsList = _c === void 0 ? [] : _c,
+    onBlur = props.onBlur;
   var isInput = inputType === InputTypeEnum.CONDITION_INPUT;
   var _d = __read(useControllableValue(props), 2),
     selectInputValue = _d[0],
@@ -104,19 +105,24 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
       inputValue: inputValue
     });
   };
+  var onConditionSelectInputBlur = function onConditionSelectInputBlur() {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(selectInputValue);
+  };
   // 是否展示输入框
   var isShowInput = !isNil(selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue) && !(hiddenInputKeys === null || hiddenInputKeys === void 0 ? void 0 : hiddenInputKeys.includes(selectInputValue.selectValue));
   var typeInput = isInput ? /*#__PURE__*/React.createElement("div", {
     className: "condition-select-input"
   }, /*#__PURE__*/React.createElement(ConditionInput, __assign({}, conditionInputProps, {
     onChange: onInputChange,
-    value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue
+    value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
+    onBlur: onConditionSelectInputBlur
   }))) : /*#__PURE__*/React.createElement("div", {
     className: "condition-select-select-input"
   }, /*#__PURE__*/React.createElement(Select, __assign({}, conditionSelectProps, {
     onChange: onTypeSelectChange,
     value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
-    options: subSelectOptions
+    options: subSelectOptions,
+    onBlur: onConditionSelectInputBlur
   })));
   return /*#__PURE__*/React.createElement("div", {
     className: "condition-select-wrap"
@@ -128,7 +134,8 @@ var ConditionSelectInput = function ConditionSelectInput(props) {
   }, /*#__PURE__*/React.createElement(Select, __assign({}, selectProps, {
     onChange: onSelectChange,
     value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
-    options: optionsList
+    options: optionsList,
+    onBlur: onConditionSelectInputBlur
   }))), isShowInput && typeInput);
 };
 export default ConditionSelectInput;

package/es/index.d.ts

@@ -78,3 +78,5 @@ export { default as BeautifulDnd } from './beautiful-dnd';
 export { default as Resizable } from './resizable';
 export type { FlexProps } from './flex';
 export { default as Flex } from './flex';
+export type { LabelConditionSelectInputProps } from './label-condition-select-input';
+export { default as LabelConditionSelectInput } from './label-condition-select-input';

package/es/index.js

@@ -39,4 +39,5 @@ export { default as LabelCustomizeRangePicker } from './label-customize-range-pi
 export { default as RichTextEditor } from './rich-text-editor';
 export { default as BeautifulDnd } from './beautiful-dnd';
 export { default as Resizable } from './resizable';
-export { default as Flex } from './flex';
+export { default as Flex } from './flex';
+export { default as LabelConditionSelectInput } from './label-condition-select-input';

package/es/label-condition-select-input/index.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { LabelConditionInputProps } from '../label-condition-input';
+import type { LabelSelectProps } from '../label-select';
+export declare enum InputTypeEnum {
+    CONDITION_INPUT = "conditionInput",
+    SELECT = "select"
+}
+declare type SelectOptionsType = {
+    value: number;
+    label: string;
+};
+export interface MainSelectOptionsType extends SelectOptionsType {
+    children?: SelectOptionsType[];
+}
+export interface ValueType {
+    selectValue?: number | string | null;
+    inputValue?: LabelSelectProps['value'] | LabelConditionInputProps['value'];
+}
+export interface LabelConditionSelectInputProps {
+    value?: ValueType;
+    /** 不需要展示联动输入框的字段值 */
+    hiddenInputKeys?: ValueType['selectValue'][];
+    /** selectProps */
+    selectProps?: LabelSelectProps;
+    /** 联动inputProps */
+    conditionInputProps?: LabelConditionInputProps;
+    /** 联动selectProps */
+    conditionSelectProps?: LabelSelectProps;
+    /** onChange */
+    onChange?: (value: ValueType) => void;
+    /** onBlur */
+    onBlur?: (value: ValueType) => void;
+    /** 输入框类型 */
+    inputType?: InputTypeEnum;
+    /** select options */
+    optionsList: MainSelectOptionsType[];
+    /** label */
+    label?: React.ReactNode;
+    /** 样式 */
+    className?: string;
+}
+declare const LabelConditionSelect: (props: LabelConditionSelectInputProps) => JSX.Element;
+export default LabelConditionSelect;

package/es/label-condition-select-input/index.js

@@ -0,0 +1,144 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __read = this && this.__read || function (o, n) {
+  var m = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m) return o;
+  var i = m.call(o),
+    r,
+    ar = [],
+    e;
+  try {
+    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
+      ar.push(r.value);
+    }
+  } catch (error) {
+    e = {
+      error: error
+    };
+  } finally {
+    try {
+      if (r && !r.done && (m = i["return"])) m.call(i);
+    } finally {
+      if (e) throw e.error;
+    }
+  }
+  return ar;
+};
+import isNil from 'lodash/isNil';
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import useControllableValue from "ahooks/es/useControllableValue";
+import LabelConditionInput from '../label-condition-input';
+import LabelSelect from '../label-select';
+export var InputTypeEnum;
+(function (InputTypeEnum) {
+  InputTypeEnum["CONDITION_INPUT"] = "conditionInput";
+  InputTypeEnum["SELECT"] = "select";
+})(InputTypeEnum || (InputTypeEnum = {}));
+var LabelConditionSelect = function LabelConditionSelect(props) {
+  var value = props.value,
+    _a = props.hiddenInputKeys,
+    hiddenInputKeys = _a === void 0 ? [] : _a,
+    selectProps = props.selectProps,
+    conditionInputProps = props.conditionInputProps,
+    conditionSelectProps = props.conditionSelectProps,
+    _b = props.inputType,
+    inputType = _b === void 0 ? InputTypeEnum.CONDITION_INPUT : _b,
+    _c = props.optionsList,
+    optionsList = _c === void 0 ? [] : _c,
+    label = props.label,
+    className = props.className,
+    onBlur = props.onBlur;
+  var isInput = inputType === InputTypeEnum.CONDITION_INPUT;
+  var _d = __read(useControllableValue(props), 2),
+    selectInputValue = _d[0],
+    setSelectInputValue = _d[1];
+  var _e = __read(useState([]), 2),
+    subSelectOptions = _e[0],
+    setSubSelectOptions = _e[1];
+  useEffect(function () {
+    if (value && value.selectValue && optionsList.length) {
+      var _a = __read(optionsList.filter(function (item) {
+          return item.value === value.selectValue;
+        }), 1),
+        selectValueItem = _a[0];
+      if (selectValueItem && selectValueItem.children) {
+        setSubSelectOptions(selectValueItem.children);
+      }
+    }
+  }, [value, optionsList]);
+  var onSelectChange = function onSelectChange(selectValue) {
+    var inputValue = isInput ? '' : undefined;
+    setSelectInputValue({
+      selectValue: selectValue,
+      inputValue: inputValue
+    });
+    if (isInput || isNil(selectValue)) {
+      setSubSelectOptions([]);
+      return;
+    }
+    var _a = __read(optionsList.filter(function (item) {
+        return item.value === selectValue;
+      }), 1),
+      selectValueItem = _a[0];
+    if (selectValueItem.children) {
+      setSubSelectOptions(selectValueItem.children);
+    }
+  };
+  var onInputChange = function onInputChange(inputValue) {
+    setSelectInputValue({
+      selectValue: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
+      inputValue: inputValue
+    });
+  };
+  var onTypeSelectChange = function onTypeSelectChange(inputValue) {
+    setSelectInputValue({
+      selectValue: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
+      inputValue: inputValue
+    });
+  };
+  var onLabelConditionSelectInputBlur = function onLabelConditionSelectInputBlur() {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(selectInputValue);
+  };
+  // 是否展示输入框
+  var isShowInput = !isNil(selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue) && !(hiddenInputKeys === null || hiddenInputKeys === void 0 ? void 0 : hiddenInputKeys.includes(selectInputValue.selectValue));
+  var typeInput = isInput ? /*#__PURE__*/React.createElement(LabelConditionInput, __assign({}, conditionInputProps, {
+    onChange: onInputChange,
+    className: "label-condition-select-second-input",
+    value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
+    onBlur: onLabelConditionSelectInputBlur
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "label-condition-select-second-select"
+  }, /*#__PURE__*/React.createElement(LabelSelect, __assign({}, conditionSelectProps, {
+    onChange: onTypeSelectChange,
+    value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.inputValue,
+    options: subSelectOptions,
+    onBlur: onLabelConditionSelectInputBlur
+  })));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('label-condition-select', className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('label-condition-select-selector', {
+      'label-condition-select-two-select-selector': !isInput,
+      'label-condition-select-only-selector': !isShowInput
+    })
+  }, /*#__PURE__*/React.createElement(LabelSelect, __assign({
+    label: label
+  }, selectProps, {
+    onChange: onSelectChange,
+    value: selectInputValue === null || selectInputValue === void 0 ? void 0 : selectInputValue.selectValue,
+    options: optionsList,
+    onBlur: onLabelConditionSelectInputBlur
+  }))), isShowInput && typeInput);
+};
+export default LabelConditionSelect;