ReactNumberInput.tsx 816 B

1234567891011121314151617181920212223
  1. import { NotificationService } from '@vendure/admin-ui/core';
  2. import { useFormControl, ReactFormInputOptions, useInjector } from '@vendure/admin-ui/react';
  3. import React from 'react';
  4. export function ReactNumberInput({ readonly }: ReactFormInputOptions) {
  5. const { value, setFormValue } = useFormControl();
  6. const notificationService = useInjector(NotificationService);
  7. const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  8. const val = +e.target.value;
  9. if (val === 0) {
  10. notificationService.error('Cannot be zero');
  11. } else {
  12. setFormValue(val);
  13. }
  14. };
  15. return (
  16. <div>
  17. This is a React component!
  18. <input readOnly={readonly} type="number" onChange={handleChange} value={value} />
  19. </div>
  20. );
  21. }