@aloudata/aloudata-design 0.2.0-beta.21 → 0.2.0-beta.22

package/es/Select/BaseSelect.js

@@ -30,6 +30,7 @@ import useCacheOptions from './hooks/useCacheOption';
 import useControlledState from '../_utils/hooks/useControlledState';
 var DEFAULT_LIST_HEIGHT = 256;
 var DEFAULT_ACTIVE_INDEX = -1;
+var DEFAULT_SELECT_LIST_INDEX = 1050;
 var ZERO = 0;
 export var Select = function Select(props, ref) {
   var _props$size = props.size,
@@ -72,7 +73,9 @@ export var Select = function Select(props, ref) {
       dropDownStyle = props.dropDownStyle,
       _props$dropdownMatchS = props.dropdownMatchSelectWidth,
       dropdownMatchSelectWidth = _props$dropdownMatchS === void 0 ? 'width' : _props$dropdownMatchS,
-      children = props.children;
+      children = props.children,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? DEFAULT_SELECT_LIST_INDEX : _props$zIndex;
   var prefix = usePrefixCls('select-legacy', customizePrefixCls);
 
   var _useControlledState = useControlledState(controlledValue, defaultValue),
@@ -354,7 +357,7 @@ export var Select = function Select(props, ref) {
     popupStyle: dropDownStyle,
     getPopupContainer: getContainer,
     stretch: dropdownMatchSelectWidth ? 'width' : 'minWidth',
-    zIndex: 100,
+    zIndex: zIndex,
     builtinPlacements: {
       left: {
         points: ['cr', 'cl']

package/es/Select/interface.d.ts

@@ -159,6 +159,11 @@ export interface ISelectProps {
      */
     label?: React.ReactNode;
     children?: React.ReactNode[] | React.ReactNode;
+    /**
+     * @description 下拉菜单的 z-index层级 属性
+     * @default 1050
+     */
+    zIndex?: number;
 }
 export interface ISelectorProps {
     input: string;

package/es/_utils/hooks/useControlledState.d.ts

@@ -1,2 +1,2 @@
-declare const useControlledState: <T>(outterState: T | (() => T) | undefined, defaultOutterState: T, callback?: ((state: T | (() => T)) => void) | undefined) => [T, (state: T | (() => T), force?: boolean | undefined) => void];
+declare const useControlledState: <T>(outerState: T | (() => T) | undefined, defaultOuterState: T, callback?: ((state: T | (() => T)) => void) | undefined) => [T, (state: T | (() => T), force?: boolean | undefined) => void];
 export default useControlledState;

package/es/_utils/hooks/useControlledState.js

@@ -16,18 +16,18 @@ import { isUndefined } from 'lodash';
 function format(_ref) {
   var _ref2 = _slicedToArray(_ref, 2),
       innerState = _ref2[0],
-      outterState = _ref2[1];
+      outerState = _ref2[1];
 
-  var isControlled = isUndefined(outterState) ? 'uncontrolled' : 'controlled';
-  var value = isUndefined(outterState) ? innerState : outterState;
+  var isControlled = isUndefined(outerState) ? 'uncontrolled' : 'controlled';
+  var value = isUndefined(outerState) ? innerState : outerState;
   return "State is ".concat(isControlled, " | Value is ").concat(value);
 }
 
-var useControlledState = function useControlledState(outterState, defaultOutterState, callback) {
-  // if (outterState === undefined && defaultOutterState === undefined) {
+var useControlledState = function useControlledState(outerState, defaultOuterState, callback) {
+  // if (outerState === undefined && defaultOuterState === undefined) {
   //   throw new TypeError('Either "value" or "defaultValue" variable must be set. Now both are undefined');
   // }
-  var _useState = useState(isUndefined(outterState) ? defaultOutterState : outterState),
+  var _useState = useState(isUndefined(outerState) ? defaultOuterState : outerState),
       _useState2 = _slicedToArray(_useState, 2),
       innerState = _useState2[0],
       setInnerState = _useState2[1];
@@ -35,19 +35,19 @@ var useControlledState = function useControlledState(outterState, defaultOutterS
   var setState = useRef(function (state) {
     var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-    if (isUndefined(outterState) || force) {
+    if (isUndefined(outerState) || force) {
       setInnerState(state);
     }
 
     callback === null || callback === void 0 ? void 0 : callback(state);
   }).current; // @ts-ignore
 
-  useDebugValue([innerState, outterState], format);
+  useDebugValue([innerState, outerState], format);
   useEffect(function () {
-    if (!isUndefined(outterState)) {
-      setInnerState(outterState);
+    if (!isUndefined(outerState)) {
+      setInnerState(outerState);
     }
-  }, [outterState]);
+  }, [outerState]);
   return [innerState, setState];
 };
 

package/lib/Select/BaseSelect.js

@@ -55,6 +55,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DEFAULT_LIST_HEIGHT = 256;
 var DEFAULT_ACTIVE_INDEX = -1;
+var DEFAULT_SELECT_LIST_INDEX = 1050;
 var ZERO = 0;
 
 var Select = function Select(props, ref) {
@@ -98,7 +99,9 @@ var Select = function Select(props, ref) {
       dropDownStyle = props.dropDownStyle,
       _props$dropdownMatchS = props.dropdownMatchSelectWidth,
       dropdownMatchSelectWidth = _props$dropdownMatchS === void 0 ? 'width' : _props$dropdownMatchS,
-      children = props.children;
+      children = props.children,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? DEFAULT_SELECT_LIST_INDEX : _props$zIndex;
   var prefix = (0, _usePrefixCls.default)('select-legacy', customizePrefixCls);
 
   var _useControlledState = (0, _useControlledState3.default)(controlledValue, defaultValue),
@@ -382,7 +385,7 @@ var Select = function Select(props, ref) {
     popupStyle: dropDownStyle,
     getPopupContainer: getContainer,
     stretch: dropdownMatchSelectWidth ? 'width' : 'minWidth',
-    zIndex: 100,
+    zIndex: zIndex,
     builtinPlacements: {
       left: {
         points: ['cr', 'cl']

package/lib/Select/interface.d.ts

@@ -159,6 +159,11 @@ export interface ISelectProps {
      */
     label?: React.ReactNode;
     children?: React.ReactNode[] | React.ReactNode;
+    /**
+     * @description 下拉菜单的 z-index层级 属性
+     * @default 1050
+     */
+    zIndex?: number;
 }
 export interface ISelectorProps {
     input: string;

package/lib/_utils/hooks/useControlledState.d.ts

@@ -1,2 +1,2 @@
-declare const useControlledState: <T>(outterState: T | (() => T) | undefined, defaultOutterState: T, callback?: ((state: T | (() => T)) => void) | undefined) => [T, (state: T | (() => T), force?: boolean | undefined) => void];
+declare const useControlledState: <T>(outerState: T | (() => T) | undefined, defaultOuterState: T, callback?: ((state: T | (() => T)) => void) | undefined) => [T, (state: T | (() => T), force?: boolean | undefined) => void];
 export default useControlledState;

package/lib/_utils/hooks/useControlledState.js

@@ -24,18 +24,18 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function format(_ref) {
   var _ref2 = _slicedToArray(_ref, 2),
       innerState = _ref2[0],
-      outterState = _ref2[1];
+      outerState = _ref2[1];
 
-  var isControlled = (0, _lodash.isUndefined)(outterState) ? 'uncontrolled' : 'controlled';
-  var value = (0, _lodash.isUndefined)(outterState) ? innerState : outterState;
+  var isControlled = (0, _lodash.isUndefined)(outerState) ? 'uncontrolled' : 'controlled';
+  var value = (0, _lodash.isUndefined)(outerState) ? innerState : outerState;
   return "State is ".concat(isControlled, " | Value is ").concat(value);
 }
 
-var useControlledState = function useControlledState(outterState, defaultOutterState, callback) {
-  // if (outterState === undefined && defaultOutterState === undefined) {
+var useControlledState = function useControlledState(outerState, defaultOuterState, callback) {
+  // if (outerState === undefined && defaultOuterState === undefined) {
   //   throw new TypeError('Either "value" or "defaultValue" variable must be set. Now both are undefined');
   // }
-  var _useState = (0, _react.useState)((0, _lodash.isUndefined)(outterState) ? defaultOutterState : outterState),
+  var _useState = (0, _react.useState)((0, _lodash.isUndefined)(outerState) ? defaultOuterState : outerState),
       _useState2 = _slicedToArray(_useState, 2),
       innerState = _useState2[0],
       setInnerState = _useState2[1];
@@ -43,19 +43,19 @@ var useControlledState = function useControlledState(outterState, defaultOutterS
   var setState = (0, _react.useRef)(function (state) {
     var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-    if ((0, _lodash.isUndefined)(outterState) || force) {
+    if ((0, _lodash.isUndefined)(outerState) || force) {
       setInnerState(state);
     }
 
     callback === null || callback === void 0 ? void 0 : callback(state);
   }).current; // @ts-ignore
 
-  (0, _react.useDebugValue)([innerState, outterState], format);
+  (0, _react.useDebugValue)([innerState, outerState], format);
   (0, _react.useEffect)(function () {
-    if (!(0, _lodash.isUndefined)(outterState)) {
-      setInnerState(outterState);
+    if (!(0, _lodash.isUndefined)(outerState)) {
+      setInnerState(outerState);
     }
-  }, [outterState]);
+  }, [outerState]);
   return [innerState, setState];
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.2.0-beta.21",
+  "version": "0.2.0-beta.22",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",