feat: supoort react-bootstrap@2.x

Author: Jiaqi Liu

README.md

@@ -36,6 +36,7 @@ Happy to use react-formutil in the project based on `react-bootstrap` ^\_^
         * [`helper`](#helper)
         * [`labelCol`](#labelcol)
         * [`wrapperCol`](#wrappercol)
+        * [`floatingLabel`](#floatinglabel)
         * [`addons`](#addons)
         * [`extra`](#extra)
         * [`$parser`](#parser)
@@ -72,9 +73,10 @@ Happy to use react-formutil in the project based on `react-bootstrap` ^\_^
 
 [![react-bootstrap-formutil](https://nodei.co/npm/react-bootstrap-formutil.png?compact=true)](https://npm.im/react-bootstrap-formutil)
 
-由于目前流行的`bootstrap`版本主要有`v3`和`v4`，其对应的`react-bootstrap`也有两个相对应的版本，所以我们也提供了两个版本供选择下载。
+📌📌 该版本适用于 `bootstrap@5.x` 和 `react-bootstrap@2.x`。
 
-该版本适用于 `bootstrap@4.x` 和 `react-bootstrap@1.x`。**如果你项目中使用的是 `bootstrap@3.x` 和 `react-bootstrap@0.32.x`，请查看 [react-bootstrap-formutil@classic](https://github.com/qiqiboy/react-bootstrap-formutil/tree/classic)**。
+-   如果你项目中使用的是 `bootstrap@3.x` 和 `react-bootstrap@0.32.x`，请查看 [react-bootstrap-formutil@classic](https://github.com/qiqiboy/react-bootstrap-formutil/tree/classic)\*\*。
+-   如果你项目中使用的是 `bootstrap@4.x` 和 `react-bootstrap@1.x`，请查看 [react-bootstrap-formutil@bs4](https://github.com/qiqiboy/react-bootstrap-formutil/tree/bs4)\*\*。
 
 ```bash
 # npm
@@ -221,6 +223,16 @@ class MyForm extends Component {
 
 该属性可用来搭配`labelCol`设置水平布局的表单项的 `栅格` 布局
 
+##### `floatingLabel`
+
+指定该属性，启用[`Floating Labels`](https://getbootstrap.com/docs/5.2/forms/floating-labels/)效果
+
+```javascript
+<FormGroup label="Your Name" floatingLabel={true}>
+    <Control placeholder="text here" />
+</FormGroup>
+```
+
 ##### `addons`
 
 该属性可以用来实现`InputGroup`布局，该属性包含三个字段`pre` `end` `size`，可以分别用来添加前后`addons`以及设置`InputGroup`的尺寸大小。
@@ -395,7 +407,7 @@ class MyForm extends Component {
 </FormGroup>
 ```
 
-以上运行示例请参考 [示例demo4](http://github.boy.im/react-bootstrap-formutil/demo/)
+以上运行示例请参考 [示例 demo4](http://github.boy.im/react-bootstrap-formutil/demo/)
 
 ##### `errorLevel`
 

dist/react-bootstrap-formutil.cjs.development.js

@@ -435,7 +435,7 @@ function insertRule(selector, content) {
   }
 }
 
-var _excluded = ["children", "addons", "label", "helper", "labelCol", "wrapperCol", "validationState", "className", "as", "feedback", "extra", "noStyle", "errorLevel"];
+var _excluded = ["children", "addons", "label", "helper", "labelCol", "wrapperCol", "validationState", "className", "as", "feedback", "floatingLabel", "extra", "noStyle", "errorLevel"];
 var isValidElementType = reactIs__default["default"].isValidElementType;
 
 var _createContext = /*#__PURE__*/React.createContext({}),
@@ -609,7 +609,8 @@ var _FormGroup = /*#__PURE__*/function (_Component) {
           props.className;
           var as = props.as;
           props.feedback;
-          var extraNode = props.extra,
+          var floatingLabel = props.floatingLabel,
+          extraNode = props.extra,
           noStyle = props.noStyle,
           _props$errorLevel = props.errorLevel,
           errorLevel = _props$errorLevel === void 0 ? errorLevelGlobal : _props$errorLevel,
@@ -639,19 +640,19 @@ var _FormGroup = /*#__PURE__*/function (_Component) {
 
       if (addons) {
         if (addons.pre) {
-          addons.pre = /*#__PURE__*/React__default["default"].createElement(reactBootstrap.InputGroup.Prepend, null, /*#__PURE__*/React.isValidElement(addons.pre) ? addons.pre : /*#__PURE__*/React__default["default"].createElement(reactBootstrap.InputGroup.Text, null, addons.pre));
+          addons.pre = /*#__PURE__*/React.isValidElement(addons.pre) ? addons.pre : /*#__PURE__*/React__default["default"].createElement(reactBootstrap.InputGroup.Text, null, addons.pre);
         }
 
         if (addons.end) {
-          addons.end = /*#__PURE__*/React__default["default"].createElement(reactBootstrap.InputGroup.Append, null, /*#__PURE__*/React.isValidElement(addons.end) ? addons.end : /*#__PURE__*/React__default["default"].createElement(reactBootstrap.InputGroup.Text, null, addons.end));
+          addons.end = /*#__PURE__*/React.isValidElement(addons.end) ? addons.end : /*#__PURE__*/React__default["default"].createElement(reactBootstrap.InputGroup.Text, null, addons.end);
         }
       } else {
         addons = {};
       }
 
       if (helper && ! /*#__PURE__*/React.isValidElement(helper)) {
         helper = /*#__PURE__*/React__default["default"].createElement(reactBootstrap.FormText, {
-          className: "text-muted"
+          muted: true
         }, helper);
       }
 
@@ -669,11 +670,12 @@ var _FormGroup = /*#__PURE__*/function (_Component) {
             _this2.forceUpdate();
           }
         });
+        var fieldInstance = typeof childList === 'function' ? childList() : childList;
         return /*#__PURE__*/React__default["default"].createElement(Provider, {
           value: this.registerField
         }, /*#__PURE__*/React__default["default"].createElement(reactBootstrap.FormGroup, Object.assign({}, fieldProps, groupProps, {
           as: groupAsProps
-        }), label, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperCol, /*#__PURE__*/React__default["default"].createElement(AddonWrapper, addonWrapperProps, addons.pre, typeof childList === 'function' ? childList() : childList, addons.end), error || helper), extraNode));
+        }), label, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperCol, /*#__PURE__*/React__default["default"].createElement(AddonWrapper, addonWrapperProps, addons.pre, fieldInstance, addons.end), error || helper), extraNode));
       } // If $memo is true, pass the children to Field for SCU diffing.
 
 
@@ -689,10 +691,8 @@ var _FormGroup = /*#__PURE__*/function (_Component) {
       var children = typeof childList === 'function' ? childList : React.Children.only(childList);
       var component = getChildComponent(children);
 
-      if (component === reactBootstrap.FormControl) {
-        if (children.props.as === 'select' && children.props.multiple) {
-          component = 'multipleSelect';
-        }
+      if ((component === reactBootstrap.FormControl && children.props.as === 'select' || component === reactBootstrap.FormSelect) && children.props.multiple) {
+        component = 'multipleSelect';
       }
 
       switch (component) {
@@ -830,7 +830,9 @@ var _FormGroup = /*#__PURE__*/function (_Component) {
 
             return /*#__PURE__*/React__default["default"].createElement(reactBootstrap.FormGroup, Object.assign({}, restProps, groupProps, {
               as: groupAsProps
-            }), label, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperCol, /*#__PURE__*/React__default["default"].createElement(AddonWrapper, addonWrapperProps, addons.pre, fieldInstance, addons.end), error || helper), extraNode);
+            }), !floatingLabel && label, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperCol, /*#__PURE__*/React__default["default"].createElement(AddonWrapper, addonWrapperProps, addons.pre, floatingLabel && label ? /*#__PURE__*/React__default["default"].createElement(reactBootstrap.FloatingLabel, {
+              label: label.props.children
+            }, fieldInstance) : fieldInstance, addons.end), error || helper), extraNode);
           });
         }
       }));
@@ -859,6 +861,7 @@ _FormGroup.propTypes = {
   label: PropTypes__default["default"].any,
   helper: PropTypes__default["default"].any,
   labelCol: PropTypes__default["default"].object,
+  floatingLabel: PropTypes__default["default"].bool,
   wrapperCol: PropTypes__default["default"].object,
   addons: PropTypes__default["default"].object,
   extra: PropTypes__default["default"].node,