refactor(ts): migrate geo components (algolia#4800)

* refactor(ts): migrate geo components * update snapshots
7Mat7 · Jun 30, 2021 · d6b6634 · d6b6634
1 parent 5e4ba53
commit d6b6634
Show file tree

Hide file tree

Showing 11 changed files with 194 additions and 171 deletions.
diff --git a/src/components/GeoSearchControls/GeoSearchButton.js b/src/components/GeoSearchControls/GeoSearchButton.js
diff --git a/src/components/GeoSearchControls/GeoSearchButton.tsx b/src/components/GeoSearchControls/GeoSearchButton.tsx
@@ -0,0 +1,23 @@
+/** @jsx h */
+
+import { h, ComponentChildren } from 'preact';
+
+type Props = {
+  className: string;
+  onClick(event: MouseEvent): void;
+  children: ComponentChildren;
+  disabled?: boolean;
+};
+
+const GeoSearchButton = ({
+  className,
+  disabled = false,
+  onClick,
+  children,
+}: Props) => (
+  <button className={className} onClick={onClick} disabled={disabled}>
+    {children}
+  </button>
+);
+
+export default GeoSearchButton;
diff --git a/src/components/GeoSearchControls/GeoSearchControls.js b/src/components/GeoSearchControls/GeoSearchControls.js
diff --git a/src/components/GeoSearchControls/GeoSearchControls.tsx b/src/components/GeoSearchControls/GeoSearchControls.tsx
@@ -0,0 +1,110 @@
+/** @jsx h */
+
+import { h, Fragment } from 'preact';
+import cx from 'classnames';
+import Template from '../Template/Template';
+import GeoSearchButton from './GeoSearchButton';
+import GeoSearchToggle from './GeoSearchToggle';
+import {
+  GeoSearchCSSClasses,
+  GeoSearchTemplates,
+} from '../../widgets/geo-search/geo-search';
+import { ComponentCSSClasses } from '../../types';
+import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
+
+type Props = {
+  cssClasses: ComponentCSSClasses<GeoSearchCSSClasses>;
+  enableRefine: boolean;
+  enableRefineControl: boolean;
+  enableClearMapRefinement: boolean;
+  isRefineOnMapMove: boolean;
+  isRefinedWithMap: boolean;
+  hasMapMoveSinceLastRefine: boolean;
+  onRefineToggle(event: Event): void;
+  onRefineClick(event: MouseEvent): void;
+  onClearClick(event: MouseEvent): void;
+  templateProps: PreparedTemplateProps<GeoSearchTemplates>;
+};
+
+const GeoSearchControls = ({
+  cssClasses,
+  enableRefine,
+  enableRefineControl,
+  enableClearMapRefinement,
+  isRefineOnMapMove,
+  isRefinedWithMap,
+  hasMapMoveSinceLastRefine,
+  onRefineToggle,
+  onRefineClick,
+  onClearClick,
+  templateProps,
+}: Props) => (
+  <Fragment>
+    {enableRefine && (
+      <div>
+        {enableRefineControl && (
+          <div className={cssClasses.control}>
+            {isRefineOnMapMove || !hasMapMoveSinceLastRefine ? (
+              <GeoSearchToggle
+                classNameLabel={cx(cssClasses.label, {
+                  [cssClasses.selectedLabel]: isRefineOnMapMove,
+                })}
+                classNameInput={cssClasses.input}
+                checked={isRefineOnMapMove}
+                onToggle={onRefineToggle}
+              >
+                <Template
+                  {...templateProps}
+                  templateKey="toggle"
+                  rootTagName="span"
+                />
+              </GeoSearchToggle>
+            ) : (
+              <GeoSearchButton
+                className={cssClasses.redo}
+                disabled={!hasMapMoveSinceLastRefine}
+                onClick={onRefineClick}
+              >
+                <Template
+                  {...templateProps}
+                  templateKey="redo"
+                  rootTagName="span"
+                />
+              </GeoSearchButton>
+            )}
+          </div>
+        )}
+
+        {!enableRefineControl && !isRefineOnMapMove && (
+          <div className={cssClasses.control}>
+            <GeoSearchButton
+              className={cx(cssClasses.redo, {
+                [cssClasses.disabledRedo]: !hasMapMoveSinceLastRefine,
+              })}
+              disabled={!hasMapMoveSinceLastRefine}
+              onClick={onRefineClick}
+            >
+              <Template
+                {...templateProps}
+                templateKey="redo"
+                rootTagName="span"
+              />
+            </GeoSearchButton>
+          </div>
+        )}
+
+        {enableClearMapRefinement && isRefinedWithMap && (
+          <GeoSearchButton className={cssClasses.reset} onClick={onClearClick}>
+            <Template
+              {...templateProps}
+              templateKey="reset"
+              rootTagName="span"
+            />
+          </GeoSearchButton>
+        )}
+      </div>
+    )}
+  </Fragment>
+);
+
+export default GeoSearchControls;
diff --git a/...ents/GeoSearchControls/GeoSearchToggle.js → ...nts/GeoSearchControls/GeoSearchToggle.tsx b/...ents/GeoSearchControls/GeoSearchToggle.js → ...nts/GeoSearchControls/GeoSearchToggle.tsx
@@ -1,15 +1,22 @@
 /** @jsx h */
 
-import { h } from 'preact';
-import PropTypes from 'prop-types';
+import { h, ComponentChildren } from 'preact';
+
+type Props = {
+  classNameLabel: string;
+  classNameInput: string;
+  checked: boolean;
+  onToggle(event: Event): void;
+  children: ComponentChildren;
+};
 
 const GeoSearchToggle = ({
   classNameLabel,
   classNameInput,
   checked,
   onToggle,
   children,
-}) => (
+}: Props) => (
   <label className={classNameLabel}>
     <input
       className={classNameInput}
@@ -21,12 +28,4 @@ const GeoSearchToggle = ({
   </label>
 );
 
-GeoSearchToggle.propTypes = {
-  classNameLabel: PropTypes.string.isRequired,
-  classNameInput: PropTypes.string.isRequired,
-  checked: PropTypes.bool.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
 export default GeoSearchToggle;
diff --git a/...ontrols/__tests__/GeoSearchButton-test.js → ...ntrols/__tests__/GeoSearchButton-test.tsx b/...ontrols/__tests__/GeoSearchButton-test.js → ...ntrols/__tests__/GeoSearchButton-test.tsx
@@ -3,6 +3,7 @@
 import { h } from 'preact';
 import { shallow } from 'enzyme';
 import GeoSearchButton from '../GeoSearchButton';
+import { ReactElementLike } from 'prop-types';
 
 describe('GeoSearchButton', () => {
   const defaultProps = {
@@ -16,9 +17,11 @@ describe('GeoSearchButton', () => {
     };
 
     const wrapper = shallow(
-      <GeoSearchButton {...props}>
-        Clear the current map refinement
-      </GeoSearchButton>
+      (
+        <GeoSearchButton {...props}>
+          Clear the current map refinement
+        </GeoSearchButton>
+      ) as ReactElementLike
     );
 
     expect(wrapper).toMatchSnapshot();
@@ -31,9 +34,11 @@ describe('GeoSearchButton', () => {
     };
 
     const wrapper = shallow(
-      <GeoSearchButton {...props}>
-        Clear the current map refinement
-      </GeoSearchButton>
+      (
+        <GeoSearchButton {...props}>
+          Clear the current map refinement
+        </GeoSearchButton>
+      ) as ReactElementLike
     );
 
     expect(wrapper).toMatchSnapshot();
@@ -46,9 +51,11 @@ describe('GeoSearchButton', () => {
     };
 
     const wrapper = shallow(
-      <GeoSearchButton {...props}>
-        Clear the current map refinement
-      </GeoSearchButton>
+      (
+        <GeoSearchButton {...props}>
+          Clear the current map refinement
+        </GeoSearchButton>
+      ) as ReactElementLike
     );
 
     expect(props.onClick).not.toHaveBeenCalled();