diff --git a/ReadMe.md b/ReadMe.md index 53f5f03..d0c7921 100644 --- a/ReadMe.md +++ b/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 diff --git a/package.json b/package.json index e7847c2..6f04340 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7df05c8..6d58906 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ dependencies: specifier: ^0.2.7 version: 0.2.7(mobx@6.10.2)(react@18.2.0) react-bootstrap: - specifier: ^2.8.0 - version: 2.8.0(@types/react@18.2.23)(react@18.2.0) + specifier: ^2.9.0 + version: 2.9.0(@types/react@18.2.24)(react@18.2.0) regenerator-runtime: specifier: ^0.14.0 version: 0.14.0 @@ -38,8 +38,8 @@ devDependencies: specifier: ^4.14.199 version: 4.14.199 '@types/react': - specifier: ^18.2.23 - version: 18.2.23 + specifier: ^18.2.24 + version: 18.2.24 husky: specifier: ^8.0.3 version: 8.0.3 @@ -56,8 +56,8 @@ devDependencies: specifier: ^9.0.1 version: 9.0.1(mobx@6.10.2)(react@18.2.0) mobx-restful: - specifier: ^0.6.11 - version: 0.6.11(mobx@6.10.2)(typescript@5.2.2) + specifier: ^0.6.12 + version: 0.6.12(mobx@6.10.2)(typescript@5.2.2) parcel: specifier: ~2.9.3 version: 2.9.3(@swc/helpers@0.5.2)(typescript@5.2.2) @@ -1212,11 +1212,11 @@ packages: /@types/react-transition-group@4.4.6: resolution: {integrity: sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==} dependencies: - '@types/react': 18.2.23 + '@types/react': 18.2.24 dev: false - /@types/react@18.2.23: - resolution: {integrity: sha512-qHLW6n1q2+7KyBEYnrZpcsAmU/iiCh9WGCKgXvMxx89+TYdJWRjZohVIo9XTcoLhfX3+/hP0Pbulu3bCZQ9PSA==} + /@types/react@18.2.24: + resolution: {integrity: sha512-Ee0Jt4sbJxMu1iDcetZEIKQr99J1Zfb6D4F3qfUWoR1JpInkY1Wdg4WwCyBjL257D0+jGqSl1twBjV8iCaC0Aw==} dependencies: '@types/prop-types': 15.7.7 '@types/scheduler': 0.16.4 @@ -1774,14 +1774,14 @@ packages: resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==} dev: true - /koajax@0.8.6(typescript@5.2.2): - resolution: {integrity: sha512-XcI6q8xs/amvbQLtu1uRdgsOvT31WKUzdZ33oZqfWsSIB/k7qwhoTd1ut9U5GzYydDnatOLHRisS71FFp5bxKA==} + /koajax@0.9.4(typescript@5.2.2): + resolution: {integrity: sha512-uwS2ggrzcZ3KkO0MST8rVdFwT2McwnmxPc9DiiWibjnb4Zcl25YeupGkcNd226hhHp9FJYm5QjHAruL8NZ97qg==} peerDependencies: jsdom: '>=21' dependencies: - '@swc/helpers': 0.4.36 + '@swc/helpers': 0.5.2 iterable-observer: 1.0.0 - regenerator-runtime: 0.13.11 + regenerator-runtime: 0.14.0 web-utility: 4.1.3(typescript@5.2.2) transitivePeerDependencies: - typescript @@ -2087,14 +2087,14 @@ packages: react: 18.2.0 dev: true - /mobx-restful@0.6.11(mobx@6.10.2)(typescript@5.2.2): - resolution: {integrity: sha512-93hwtSSc50A7r+rLim3dRXlAJPx+kUR1qYWxM6L9kuIag8R5oTFNCte8FlsgOegGcX2p66U1Tkn6T26lomIoxg==} + /mobx-restful@0.6.12(mobx@6.10.2)(typescript@5.2.2): + resolution: {integrity: sha512-T9h++i/Ca31FPiBDNPux4b4kygeBk9SYxn3Ol7Mg9rNLAd/0j2eFG7UQTeL3qgFwEDzq8M1s2SoH0SSZjm9lag==} peerDependencies: mobx: '>=4' dependencies: '@swc/helpers': 0.5.2 class-validator: 0.14.0 - koajax: 0.8.6(typescript@5.2.2) + koajax: 0.9.4(typescript@5.2.2) mobx: 6.10.2 reflect-metadata: 0.1.13 regenerator-runtime: 0.14.0 @@ -2341,8 +2341,8 @@ packages: react-is: 16.13.1 dev: false - /react-bootstrap@2.8.0(@types/react@18.2.23)(react@18.2.0): - resolution: {integrity: sha512-e/aNtxl0Z2ozrIaR82jr6Zz7ss9GSoaXpQaxmvtDUsTZIq/XalkduR/ZXP6vbQHz2T4syvjA+4FbtwELxxmpww==} + /react-bootstrap@2.9.0(@types/react@18.2.24)(react@18.2.0): + resolution: {integrity: sha512-dGh6fGjqR9MBzPOp2KbXJznt1Zy6SWepXYUdxMT18Zu/wJ73HCU8JNZe9dfzjmVssZYsJH9N3HHE4wAtQvNz7g==} peerDependencies: '@types/react': '>=16.14.8' react: '>=16.14.0' @@ -2354,7 +2354,7 @@ packages: '@babel/runtime': 7.23.1 '@restart/hooks': 0.4.11(react@18.2.0) '@restart/ui': 1.6.6(react@18.2.0) - '@types/react': 18.2.23 + '@types/react': 18.2.24 '@types/react-transition-group': 4.4.6 classnames: 2.3.2 dom-helpers: 5.2.1 @@ -2607,7 +2607,7 @@ packages: react: '>=15.0.0' dependencies: '@babel/runtime': 7.23.1 - '@types/react': 18.2.23 + '@types/react': 18.2.24 invariant: 2.2.4 react: 18.2.0 react-lifecycles-compat: 3.0.4 diff --git a/source/RangeInput.tsx b/source/RangeInput.tsx new file mode 100644 index 0000000..8ea3263 --- /dev/null +++ b/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 { + icon?: ReactNode | ((value: number) => ReactNode); +} + +@observer +@observePropsState +export class RangeInput extends FormComponent { + declare observedProps: RangeInputProps; + + handleChange = ({ + currentTarget: { value }, + }: ChangeEvent) => { + 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 ( +
+ +
+ {Array.from({ length: Math.ceil(+value) }, (_, index) => ( +
+ {typeof icon === 'function' + ? icon(+value - index > 1 ? 1 : +value - index) + : icon} +
+ ))} +
+
+ ); + } +} diff --git a/source/index.ts b/source/index.ts index f38f217..6c8349a 100644 --- a/source/index.ts +++ b/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';