@licklist/design 0.72.72-dev.2 → 0.72.72-dev.4

package/src/product-set/product/scanRange/ProductScanRangeControl.tsx

@@ -0,0 +1,163 @@
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
+import {
+  FieldNamePrefixPath,
+  FormValues,
+} from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { useId } from '@react-aria/utils'
+import { Form } from 'react-bootstrap'
+import Col from 'react-bootstrap/Col'
+import InputGroup from 'react-bootstrap/InputGroup'
+import Row from 'react-bootstrap/Row'
+import { Controller, Path, useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+
+import { ReactComponent as IncrementIcon } from '../../../assets/dashboard/increment.svg'
+
+export interface ProductScanRangeControlValues extends FormValues {
+  scanRangeStart: number
+  scanRangeEnd: number
+}
+
+export interface ProductScanRangeControlProps<T> extends FieldNamePrefixPath<T> {
+  isLoading: boolean
+  onFocus?: (e: React.SyntheticEvent) => void
+  isOverrides?: boolean
+}
+
+export function ProductScanRangeControl<T extends FormValues>(
+  props: ProductScanRangeControlProps<T>,
+) {
+  const { isLoading = false, fieldNamePrefix, onFocus, isOverrides } = props
+  const {
+    control,
+    formState: { errors },
+    setValue,
+    watch
+  } = useFormContext<T>()
+  const { t } = useTranslation('Design')
+
+  const scanRangeStartId = useId()
+  const scanRangeEndId = useId()
+
+  const scanRangeStartValue = watch(`${fieldNamePrefix}.scanRangeStart` as Path<T>)
+  const scanRangeEndValue = watch(`${fieldNamePrefix}.scanRangeEnd` as Path<T>)
+
+  return (
+    <>
+     <Form.Label>{t('scanningRange')}</Form.Label>
+    <Row>
+      <Col xs={12} sm={6}>
+        <Form.Group controlId={scanRangeStartId}>
+          <Form.Label>{t('beforeEventStart')}</Form.Label>
+
+          <InputGroup hasValidation>
+            <InputGroup.Prepend
+              className='arrow-up-btn'
+              onClick={() => {
+                setValue(
+                  `${fieldNamePrefix}.scanRangeStart` as Path<T>,
+                  (Number(scanRangeStartValue) + 1) as any,
+                )
+              }}
+            >
+              <InputGroup.Text className='py-0 px-3'>
+                <IncrementIcon />
+              </InputGroup.Text>
+            </InputGroup.Prepend>
+
+            <Controller
+              render={({ field: { value, onChange, ref } }) => (
+                <Form.Control
+                  ref={ref}
+                  type='number'
+                  min={0}
+                  step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
+                  value={value as string}
+                  onChange={onChange}
+                  onFocus={onFocus}
+                  disabled={isLoading || isOverrides}
+                />
+              )}
+              control={control}
+              name={`${fieldNamePrefix}.scanRangeStart` as Path<T>}
+              rules={{
+                min: {
+                  value: 0,
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('scanRangeStart'),
+                    min: 0,
+                  }) as string,
+                },
+              }}
+            />
+
+            <Form.Control.Feedback type='invalid'>
+              {HookFormService.getErrors<T>(
+                `${fieldNamePrefix}.scanRangeStart` as Path<T>,
+                errors,
+              )}
+            </Form.Control.Feedback>
+          </InputGroup>
+        </Form.Group>
+      </Col>
+
+      <Col xs={12} sm={6}>
+        <Form.Group controlId={scanRangeEndId}>
+          <Form.Label>{t('AfterEventStart')}</Form.Label>
+
+          <InputGroup hasValidation>
+            <InputGroup.Prepend
+              className='arrow-up-btn'
+              onClick={() => {
+                setValue(
+                  `${fieldNamePrefix}.scanRangeEnd` as Path<T>,
+                  (Number(scanRangeEndValue) + 1) as any,
+                )
+              }}
+            >
+              <InputGroup.Text className='py-0 px-3'>
+                <IncrementIcon />
+              </InputGroup.Text>
+            </InputGroup.Prepend>
+
+            <Controller
+              render={({ field: { value, onChange, ref } }) => (
+                <Form.Control
+                  ref={ref}
+                  type='number'
+                  min={0}
+                  step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
+                  value={value && (value as string)}
+                  onFocus={onFocus}
+                  onChange={onChange}
+                  disabled={isLoading || isOverrides}
+                />
+              )}
+              control={control}
+              name={`${fieldNamePrefix}.scanRangeEnd` as Path<T>}
+              rules={{
+                min: {
+                  value: 0,
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('scanRangeEnd'),
+                    min: 0,
+                  }) as string,
+                },
+              }}
+            />
+
+            <Form.Control.Feedback type='invalid'>
+              {HookFormService.getErrors<T>(
+                `${fieldNamePrefix}.scanRangeEnd` as Path<T>,
+                errors,
+              )}
+            </Form.Control.Feedback>
+          </InputGroup>
+        </Form.Group>
+      </Col>
+    </Row>
+    </>
+  )
+}

package/src/product-set/product/scanRange/index.ts

@@ -0,0 +1 @@
+export * from './ProductScanRangeControl'