@qite/tide-booking-component 1.4.92 → 1.4.93

package/src/booking-wizard/components/labeled-input.tsx

@@ -1,56 +1,56 @@
-import React from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-import { compact } from 'lodash';
-
-interface LabeledInputProps {
-  name: string;
-  type?: string;
-  required?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  min?: string | number;
-  max?: string | number;
-  label?: string;
-  placeholder?: string;
-  hasError?: boolean;
-  extraClassName?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-}
-
-const LabeledInput: React.FC<LabeledInputProps> = ({
-  name,
-  type,
-  required,
-  value,
-  defaultValue,
-  min,
-  max,
-  label,
-  placeholder,
-  extraClassName,
-  hasError,
-  onChange,
-  onBlur
-}) => {
-  return (
-    <label className={buildClassName(['form__group', extraClassName, hasError && 'form__group--error'])}>
-      <span className="form__label">{compact([label, required && '*']).join(' ')}</span>
-      <input
-        name={name}
-        type={type ?? 'text'}
-        required={required}
-        className="form__input"
-        min={min}
-        max={max}
-        placeholder={placeholder}
-        onChange={onChange}
-        onBlur={onBlur}
-        value={value}
-        defaultValue={defaultValue}
-      />
-    </label>
-  );
-};
-
-export default LabeledInput;
+import React from 'react';
+import { buildClassName } from '../../shared/utils/class-util';
+import { compact } from 'lodash';
+
+interface LabeledInputProps {
+  name: string;
+  type?: string;
+  required?: boolean;
+  value?: string | number;
+  defaultValue?: string | number;
+  min?: string | number;
+  max?: string | number;
+  label?: string;
+  placeholder?: string;
+  hasError?: boolean;
+  extraClassName?: string;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+
+const LabeledInput: React.FC<LabeledInputProps> = ({
+  name,
+  type,
+  required,
+  value,
+  defaultValue,
+  min,
+  max,
+  label,
+  placeholder,
+  extraClassName,
+  hasError,
+  onChange,
+  onBlur
+}) => {
+  return (
+    <label className={buildClassName(['form__group', extraClassName, hasError && 'form__group--error'])}>
+      <span className="form__label">{compact([label, required && '*']).join(' ')}</span>
+      <input
+        name={name}
+        type={type ?? 'text'}
+        required={required}
+        className="form__input"
+        min={min}
+        max={max}
+        placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        defaultValue={defaultValue}
+      />
+    </label>
+  );
+};
+
+export default LabeledInput;

package/src/booking-wizard/components/labeled-select.tsx

@@ -1,54 +1,54 @@
-import React from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-import { compact } from 'lodash';
-
-interface LabeledSelectProps {
-  name: string;
-  id?: string;
-  required?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  label?: string;
-  hasError?: boolean;
-  extraClassName?: string;
-  extraDropdownClassName?: string;
-  options?: {
-    key: string;
-    value: string | number | undefined;
-    label: string;
-  }[];
-  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
-  onBlur?: React.FocusEventHandler<HTMLSelectElement>;
-}
-
-const LabeledSelect: React.FC<LabeledSelectProps> = ({
-  name,
-  id,
-  required,
-  value,
-  defaultValue,
-  label,
-  extraClassName,
-  extraDropdownClassName,
-  hasError,
-  options,
-  onChange,
-  onBlur
-}) => {
-  return (
-    <label className={buildClassName(['form__group', extraClassName, hasError && 'form__group--error'])}>
-      <span className="form__label">{compact([label, required && '*']).join(' ')}</span>
-      <div className={buildClassName(['dropdown', extraDropdownClassName])}>
-        <select name={name} id={id} defaultValue={defaultValue} value={value} onBlur={onBlur} onChange={onChange}>
-          {options?.map((option) => (
-            <option key={option.key} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-      </div>
-    </label>
-  );
-};
-
-export default LabeledSelect;
+import React from 'react';
+import { buildClassName } from '../../shared/utils/class-util';
+import { compact } from 'lodash';
+
+interface LabeledSelectProps {
+  name: string;
+  id?: string;
+  required?: boolean;
+  value?: string | number;
+  defaultValue?: string | number;
+  label?: string;
+  hasError?: boolean;
+  extraClassName?: string;
+  extraDropdownClassName?: string;
+  options?: {
+    key: string;
+    value: string | number | undefined;
+    label: string;
+  }[];
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+  onBlur?: React.FocusEventHandler<HTMLSelectElement>;
+}
+
+const LabeledSelect: React.FC<LabeledSelectProps> = ({
+  name,
+  id,
+  required,
+  value,
+  defaultValue,
+  label,
+  extraClassName,
+  extraDropdownClassName,
+  hasError,
+  options,
+  onChange,
+  onBlur
+}) => {
+  return (
+    <label className={buildClassName(['form__group', extraClassName, hasError && 'form__group--error'])}>
+      <span className="form__label">{compact([label, required && '*']).join(' ')}</span>
+      <div className={buildClassName(['dropdown', extraDropdownClassName])}>
+        <select name={name} id={id} defaultValue={defaultValue} value={value} onBlur={onBlur} onChange={onChange}>
+          {options?.map((option) => (
+            <option key={option.key} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </label>
+  );
+};
+
+export default LabeledSelect;

package/src/booking-wizard/components/message.tsx

@@ -1,21 +1,21 @@
-import Icon from './icon';
-import React from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-
-interface MessageProps {
-  type: 'error' | 'success';
-  title: string;
-  actionComponent?: JSX.Element;
-  children?: JSX.Element | JSX.Element[];
-}
-
-const Message: React.FC<MessageProps> = ({ type, title, actionComponent, children }) => (
-  <div className={buildClassName(['booking-message', type === 'error' && 'booking-message--error', type === 'success' && 'booking-message--success'])}>
-    {type === 'error' && <Icon name="ui-error" />}
-    <h4 className="booking-message__heading">{title}</h4>
-    <div className="booking-message__text">{children}</div>
-    {actionComponent && <div className="booking-message__actions">{actionComponent}</div>}
-  </div>
-);
-
-export default Message;
+import Icon from './icon';
+import React from 'react';
+import { buildClassName } from '../../shared/utils/class-util';
+
+interface MessageProps {
+  type: 'error' | 'success';
+  title: string;
+  actionComponent?: JSX.Element;
+  children?: JSX.Element | JSX.Element[];
+}
+
+const Message: React.FC<MessageProps> = ({ type, title, actionComponent, children }) => (
+  <div className={buildClassName(['booking-message', type === 'error' && 'booking-message--error', type === 'success' && 'booking-message--success'])}>
+    {type === 'error' && <Icon name="ui-error" />}
+    <h4 className="booking-message__heading">{title}</h4>
+    <div className="booking-message__text">{children}</div>
+    {actionComponent && <div className="booking-message__actions">{actionComponent}</div>}
+  </div>
+);
+
+export default Message;

package/src/booking-wizard/components/multi-range-filter.tsx

@@ -1,99 +1,99 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
-
-interface MultiRangeFilterProps {
-  min: number;
-  max: number;
-  selectedMin: number;
-  selectedMax: number;
-
-  valueFormatter: (value: number) => string;
-  onChange: (min: number, max: number) => void;
-}
-
-const MultiRangeFilter: React.FC<MultiRangeFilterProps> = ({ min, max, selectedMin, selectedMax, valueFormatter, onChange }) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [leftPercentage, setLeftPercentage] = useState<number>(0);
-  const [rightPercentage, setRightPercentage] = useState<number>(0);
-  const [minVal, setMinVal] = useState(min);
-  const [maxVal, setMaxVal] = useState(max);
-  const minGap = 5;
-
-  useEffect(() => {
-    setSliderTrack();
-  }, [minVal, maxVal]);
-
-  const slideMin = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-    if (value >= min && selectedMax - value >= minGap) {
-      setMinVal(value);
-    }
-  };
-
-  const slideMax = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-    if (value <= max && value - selectedMin >= minGap) {
-      setMaxVal(value);
-    }
-  };
-
-  const setSliderTrack = () => {
-    const range = document.querySelector('.slider-track');
-
-    if (range) {
-      const minPercent = ((minVal - min) / (max - min)) * 100;
-      const maxPercent = ((maxVal - min) / (max - min)) * 100;
-
-      setLeftPercentage(minPercent);
-      setRightPercentage(100 - maxPercent);
-    }
-  };
-
-  const startDrag = () => {
-    setIsDragging(true);
-  };
-
-  const stopDrag = () => {
-    setIsDragging(false);
-    onChange(minVal, maxVal);
-  };
-
-  return (
-    <div className="double-slider-box">
-      <div className="input-box">
-        <div className="min-box">{valueFormatter(min)}</div>
-        <div className="max-box">{valueFormatter(max)}</div>
-      </div>
-      <div className="range-slider">
-        <div className="slider-track" style={{ left: leftPercentage + '%', right: rightPercentage + '%' }}></div>
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={minVal}
-          onChange={slideMin}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="min-val"
-        />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={maxVal}
-          onChange={slideMax}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="max-val"
-        />
-        {isDragging && <div className="min-tooltip">{valueFormatter(minVal)}</div>}
-        {isDragging && <div className="max-tooltip">{valueFormatter(maxVal)}</div>}
-      </div>
-    </div>
-  );
-};
-
-export default MultiRangeFilter;
+import React, { ChangeEvent, useEffect, useState } from 'react';
+
+interface MultiRangeFilterProps {
+  min: number;
+  max: number;
+  selectedMin: number;
+  selectedMax: number;
+
+  valueFormatter: (value: number) => string;
+  onChange: (min: number, max: number) => void;
+}
+
+const MultiRangeFilter: React.FC<MultiRangeFilterProps> = ({ min, max, selectedMin, selectedMax, valueFormatter, onChange }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [leftPercentage, setLeftPercentage] = useState<number>(0);
+  const [rightPercentage, setRightPercentage] = useState<number>(0);
+  const [minVal, setMinVal] = useState(min);
+  const [maxVal, setMaxVal] = useState(max);
+  const minGap = 5;
+
+  useEffect(() => {
+    setSliderTrack();
+  }, [minVal, maxVal]);
+
+  const slideMin = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value, 10);
+    if (value >= min && selectedMax - value >= minGap) {
+      setMinVal(value);
+    }
+  };
+
+  const slideMax = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value, 10);
+    if (value <= max && value - selectedMin >= minGap) {
+      setMaxVal(value);
+    }
+  };
+
+  const setSliderTrack = () => {
+    const range = document.querySelector('.slider-track');
+
+    if (range) {
+      const minPercent = ((minVal - min) / (max - min)) * 100;
+      const maxPercent = ((maxVal - min) / (max - min)) * 100;
+
+      setLeftPercentage(minPercent);
+      setRightPercentage(100 - maxPercent);
+    }
+  };
+
+  const startDrag = () => {
+    setIsDragging(true);
+  };
+
+  const stopDrag = () => {
+    setIsDragging(false);
+    onChange(minVal, maxVal);
+  };
+
+  return (
+    <div className="double-slider-box">
+      <div className="input-box">
+        <div className="min-box">{valueFormatter(min)}</div>
+        <div className="max-box">{valueFormatter(max)}</div>
+      </div>
+      <div className="range-slider">
+        <div className="slider-track" style={{ left: leftPercentage + '%', right: rightPercentage + '%' }}></div>
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={minVal}
+          onChange={slideMin}
+          onMouseDown={startDrag}
+          onMouseUp={stopDrag}
+          onTouchStart={startDrag}
+          onTouchEnd={stopDrag}
+          className="min-val"
+        />
+        <input
+          type="range"
+          min={min}
+          max={max}
+          value={maxVal}
+          onChange={slideMax}
+          onMouseDown={startDrag}
+          onMouseUp={stopDrag}
+          onTouchStart={startDrag}
+          onTouchEnd={stopDrag}
+          className="max-val"
+        />
+        {isDragging && <div className="min-tooltip">{valueFormatter(minVal)}</div>}
+        {isDragging && <div className="max-tooltip">{valueFormatter(maxVal)}</div>}
+      </div>
+    </div>
+  );
+};
+
+export default MultiRangeFilter;