[add] Range Input component

ReadMe.md

@@ -15,12 +15,13 @@ A **Pagination Table** & **Scroll List** component suite for [CRUD operation][1]
 3. [File Picker](https://idea2app.github.io/MobX-RESTful-table/classes/FilePicker.html)
 4. [File Uploader](https://idea2app.github.io/MobX-RESTful-table/classes/FileUploader.html)
 5. [Form Field](https://idea2app.github.io/MobX-RESTful-table/functions/FormField-1.html)
-6. [Badge Input](https://idea2app.github.io/MobX-RESTful-table/classes/BadgeInput.html)
-7. [REST Form](https://idea2app.github.io/MobX-RESTful-table/classes/RestForm.html)
-8. [Pager](https://idea2app.github.io/MobX-RESTful-table/functions/Pager-1.html)
-9. [REST Table](https://idea2app.github.io/MobX-RESTful-table/classes/RestTable.html)
-10. [Scroll Boundary](https://idea2app.github.io/MobX-RESTful-table/functions/ScrollBoundary-1.html)
-11. [Scroll List](https://idea2app.github.io/MobX-RESTful-table/classes/ScrollList.html)
+6. [Range Input](https://idea2app.github.io/MobX-RESTful-table/classes/RangeInput.html)
+7. [Badge Input](https://idea2app.github.io/MobX-RESTful-table/classes/BadgeInput.html)
+8. [REST Form](https://idea2app.github.io/MobX-RESTful-table/classes/RestForm.html)
+9. [Pager](https://idea2app.github.io/MobX-RESTful-table/functions/Pager-1.html)
+10. [REST Table](https://idea2app.github.io/MobX-RESTful-table/classes/RestTable.html)
+11. [Scroll Boundary](https://idea2app.github.io/MobX-RESTful-table/functions/ScrollBoundary-1.html)
+12. [Scroll List](https://idea2app.github.io/MobX-RESTful-table/classes/ScrollList.html)
 
 ## Installation
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-restful-table",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "license": "LGPL-3.0",
   "author": "shiy2008@gmail.com",
   "description": "A Pagination Table & Scroll List component suite for CRUD operation, which is based on MobX RESTful & React.",
@@ -29,7 +29,7 @@
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "mobx-react-helper": "^0.2.7",
-    "react-bootstrap": "^2.8.0",
+    "react-bootstrap": "^2.9.0",
     "regenerator-runtime": "^0.14.0",
     "web-utility": "^4.1.3"
   },
@@ -44,13 +44,13 @@
     "@parcel/packager-ts": "~2.9.3",
     "@parcel/transformer-typescript-types": "~2.9.3",
     "@types/lodash": "^4.14.199",
-    "@types/react": "^18.2.23",
+    "@types/react": "^18.2.24",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "mobx": "^6.10.2",
     "mobx-i18n": "^0.4.1",
     "mobx-react": "^9.0.1",
-    "mobx-restful": "^0.6.11",
+    "mobx-restful": "^0.6.12",
     "parcel": "~2.9.3",
     "prettier": "^3.0.3",
     "react": "^18.2.0",

source/RangeInput.tsx

@@ -0,0 +1,57 @@
+import { observer } from 'mobx-react';
+import {
+  FormComponent,
+  FormComponentProps,
+  observePropsState,
+} from 'mobx-react-helper';
+import { ChangeEvent, ReactNode } from 'react';
+
+export interface RangeInputProps extends Omit<FormComponentProps, 'type'> {
+  icon?: ReactNode | ((value: number) => ReactNode);
+}
+
+@observer
+@observePropsState
+export class RangeInput extends FormComponent<RangeInputProps> {
+  declare observedProps: RangeInputProps;
+
+  handleChange = ({
+    currentTarget: { value },
+  }: ChangeEvent<HTMLInputElement>) => {
+    this.innerValue = value;
+
+    this.props.onChange?.(value);
+  };
+
+  render() {
+    const {
+        className = 'd-inline-block position-relative',
+        icon,
+        min,
+        max = icon ? 5 : 100,
+        onChange,
+        ...props
+      } = this.observedProps,
+      { value = min || 0 } = this;
+
+    return (
+      <div className={className} title={value + ''}>
+        <input
+          {...{ min, max, value, ...props }}
+          className={icon ? 'opacity-0' : ''}
+          type="range"
+          onChange={this.handleChange}
+        />
+        <div className="position-absolute start-0 top-0 w-100 h-100 pe-none d-flex">
+          {Array.from({ length: Math.ceil(+value) }, (_, index) => (
+            <div className="text-center" style={{ width: 100 / +max + '%' }}>
+              {typeof icon === 'function'
+                ? icon(+value - index > 1 ? 1 : +value - index)
+                : icon}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}

source/index.ts

@@ -3,6 +3,7 @@ export * from './FilePreview';
 export * from './FilePicker';
 export * from './FileUploader';
 export * from './FormField';
+export * from './RangeInput';
 export * from './BadgeInput';
 export * from './RestForm';
 export * from './Pager';