@wayke-se/components-react 3.0.0-beta.7 → 3.0.0-beta.9

package/src/components/RangeSlider/SliderWithLabel.tsx

@@ -1,62 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { numberSeparator } from '../../utils/formats';
-import RangeSliderLabel from '../RangeSliderLabel/index';
-import { RepeatTiny } from '../Repeat/index';
-import RangeSliderSimple from './RangeSliderSimple';
-
-interface SliderWithLabelProps {
-  label: string;
-  values: number[];
-  domain: number[];
-  steps: number[];
-  loading: boolean;
-  unit: string;
-  formatValues?: boolean;
-  onChange: (values: readonly number[]) => void;
-}
-
-const SliderWithLabel = ({
-  label,
-  values,
-  domain,
-  steps,
-  loading,
-  unit,
-  formatValues,
-  onChange,
-}: SliderWithLabelProps) => {
-  const [local, setLocal] = useState<number[] | undefined>(steps);
-
-  const onUpdate = useCallback((nextValues: readonly number[]) => {
-    setLocal([...nextValues]);
-  }, []);
-
-  useEffect(() => {
-    if (!loading) setLocal(undefined);
-  }, [loading]);
-
-  return (
-    <>
-      <RepeatTiny>
-        <RangeSliderLabel
-          label={label}
-          value={`${numberSeparator(local?.[0] || values[0])}${unit ? ` ${unit}` : ''}`}
-        />
-      </RepeatTiny>
-      <RepeatTiny>
-        <RangeSliderSimple
-          loading={loading}
-          values={values}
-          domain={domain}
-          steps={steps}
-          onChange={onChange}
-          onUpdate={onUpdate}
-          unit={unit}
-          formatValues={formatValues}
-        />
-      </RepeatTiny>
-    </>
-  );
-};
-
-export default SliderWithLabel;

package/src/components/RangeSlider/handle.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Handle as OwnHandle } from './wrapper';
-import { SliderItem, GetHandleProps } from 'react-compound-slider';
-
-interface IHandleProps {
-  domain: number[];
-  handle: SliderItem;
-  getHandleProps: GetHandleProps;
-}
-
-export const Handle = ({
-  domain: [min, max],
-  handle: { id, value, percent },
-  getHandleProps,
-}: IHandleProps) => (
-  <OwnHandle
-    role="slider"
-    aria-valuemin={min}
-    aria-valuemax={max}
-    aria-valuenow={value}
-    style={{
-      left: `${percent}%`,
-    }}
-    {...getHandleProps(id)}
-  />
-);

package/src/components/RangeSlider/index.tsx

@@ -1,132 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { Slider, Rail, Handles, Tracks } from 'react-compound-slider';
-
-import {
-  Bar,
-  RangeSpan,
-  RangeSpanItem,
-  Slider as OwnSlider,
-  Track as OwnTrack,
-  Handle as OwnHandle,
-} from './wrapper';
-import { Handle } from './handle';
-import { Track } from './track';
-import { numberSeparator } from '../../utils/formats';
-
-const getSteps = (steps: number[]) => {
-  let current = Number.MAX_SAFE_INTEGER;
-  steps.forEach((step, index) => {
-    if (index !== 0) {
-      const c = step - steps[index - 1];
-      if (c < current) {
-        current = c;
-      }
-    }
-  });
-  return current;
-};
-
-interface RangeSliderProps {
-  loading: boolean;
-  domain: number[];
-  values: number[];
-  steps: number[];
-  unit?: string;
-  formatValues?: boolean;
-  maxPrefix?: string;
-  onChange: (values: readonly number[]) => void;
-}
-
-const RangeSlider = ({
-  loading,
-  values,
-  domain,
-  steps,
-  unit,
-  formatValues,
-  maxPrefix,
-  onChange,
-}: RangeSliderProps) => {
-  const [current, setCurrent] = useState<number[]>(values);
-  const onUpdate = useCallback(
-    (nextValues: readonly number[]) => {
-      if (!isNaN(nextValues[0]) && !isNaN(nextValues[1])) {
-        setCurrent(nextValues.slice());
-      }
-    },
-    [values]
-  );
-
-  const step = getSteps(steps);
-
-  const currentMin = formatValues ? numberSeparator(current[0]) : current[0];
-  const currentMax = formatValues ? numberSeparator(current[1]) : current[1];
-  const equal = domain[0] === domain[1];
-  const _maxPrefix = maxPrefix && domain[1] === current[1] ? maxPrefix : undefined;
-
-  useEffect(() => {
-    if (values[0] !== current[0] || values[1] !== current[1]) {
-      setCurrent(values);
-    }
-  }, [values]);
-
-  return (
-    <>
-      {equal ? (
-        <OwnSlider>
-          <Bar>
-            <OwnTrack style={{ left: '0', width: '100%' }} />
-            <OwnHandle role="slider" aria-disabled style={{ left: '0' }} />
-            <OwnHandle role="slider" aria-disabled style={{ left: '100%' }} />
-          </Bar>
-        </OwnSlider>
-      ) : (
-        <OwnSlider>
-          <Slider
-            disabled={loading}
-            mode={1}
-            step={step}
-            domain={domain}
-            onChange={onChange}
-            onUpdate={onUpdate}
-            values={values}
-            rootStyle={{ position: 'relative' }}
-          >
-            <Rail>{({ getRailProps }) => <Bar {...getRailProps()} />}</Rail>
-            <Handles>
-              {({ handles, getHandleProps }) => (
-                <div className="slider-handles">
-                  {handles.map((handle) => (
-                    <Handle
-                      key={handle.id}
-                      handle={handle}
-                      domain={domain}
-                      getHandleProps={getHandleProps}
-                    />
-                  ))}
-                </div>
-              )}
-            </Handles>
-            <Tracks left={false} right={false}>
-              {({ tracks, getTrackProps }) => (
-                <div className="slider-tracks">
-                  {tracks.map(({ id, source, target }) => (
-                    <Track key={id} source={source} target={target} getTrackProps={getTrackProps} />
-                  ))}
-                </div>
-              )}
-            </Tracks>
-          </Slider>
-        </OwnSlider>
-      )}
-      <RangeSpan>
-        <RangeSpanItem>{`${currentMin}${unit ? ` ${unit}` : ''}`}</RangeSpanItem>
-        <RangeSpanItem>{`${currentMax}${_maxPrefix ? _maxPrefix : ''}${
-          unit ? ` ${unit}` : ''
-        }`}</RangeSpanItem>
-      </RangeSpan>
-    </>
-  );
-};
-
-export default RangeSlider;

package/src/components/RangeSlider/track.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Track as OwnTrack } from './wrapper';
-import { SliderItem, GetTrackProps } from 'react-compound-slider';
-
-interface ITrackProps {
-  source: SliderItem;
-  target: SliderItem;
-  getTrackProps: GetTrackProps;
-}
-
-export const Track = ({ source, target, getTrackProps }: ITrackProps) => (
-  <OwnTrack
-    style={{
-      left: `${source.percent}%`,
-      width: `${target.percent - source.percent}%`,
-    }}
-    {...getTrackProps()}
-  />
-);

package/src/components/RangeSliderLabel/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Label, Value } from './wrapper';
-
-interface Props {
-  label: string;
-  value?: React.ReactNode;
-  highlight?: boolean;
-}
-
-const RangeSliderLabel = ({ label, value, highlight }: Props) => (
-  <Wrapper>
-    <Label>{label}</Label>
-    {value && <Value isHighlighted={highlight}>{value}</Value>}
-  </Wrapper>
-);
-
-export default RangeSliderLabel;

package/src/components/Result/index.tsx

@@ -1,91 +0,0 @@
-import React, { useCallback } from 'react';
-
-import {
-  Wrapper,
-  Header,
-  HeaderCount,
-  HeaderSort,
-  Body,
-  Footer,
-  FooterProgress,
-  FooterAction,
-  ResultCount,
-} from './wrapper';
-import ProgressBar from '../ProgressBar/index';
-import { ButtonSecondary, ButtonContent } from '../Button/index';
-import Loader from '../Loader/index';
-import { numberSeparator } from '../../utils/formats';
-import useSearch from '../../State/Search/useSearch';
-import SortSelect, { OptionProps } from '../SortSelect/index';
-import { getTranslatedSortOptionDisplayName } from '../../utils/sortOptions';
-
-interface Props {
-  children: React.ReactNode;
-}
-
-const Result = ({ children }: Props) => {
-  const { loading, response, documents, queryFilter, onLoadMore, onFilterUpdate } = useSearch();
-
-  const onSortOptionChange = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => onFilterUpdate(e.currentTarget.value),
-    []
-  );
-
-  const numberOfDocuments = documents?.length || 0;
-  const numberOfHits = response?.documentList.numberOfHits || 0;
-  const useSkeletons = !!queryFilter?.concatResult;
-
-  const selectedSortOption = response?.documentList.sortOptions.find((x) => x.selected)?.query;
-  const sortOptions = response?.documentList.sortOptions
-    .filter((x) => x.displayName !== 'relevance')
-    .map(
-      (so): OptionProps => ({
-        value: so.query,
-        displayName: getTranslatedSortOptionDisplayName(so.displayName),
-      })
-    );
-
-  if (loading && !useSkeletons) {
-    return <Loader />;
-  }
-  return (
-    <Wrapper>
-      <Header>
-        <HeaderCount>
-          <ResultCount>{`${numberSeparator(numberOfHits)} ${
-            numberOfHits === 1 ? 'bil' : 'bilar'
-          }`}</ResultCount>
-        </HeaderCount>
-        {sortOptions && selectedSortOption && (
-          <HeaderSort>
-            <SortSelect
-              value={selectedSortOption}
-              options={sortOptions}
-              onChange={onSortOptionChange}
-            />
-          </HeaderSort>
-        )}
-      </Header>
-      <Body>{children}</Body>
-      <Footer>
-        <FooterProgress>
-          <ProgressBar unit="bilar" valueCurrent={numberOfDocuments} valueMax={numberOfHits} />
-        </FooterProgress>
-        {numberOfDocuments !== numberOfHits && (
-          <FooterAction>
-            <ButtonSecondary
-              disabled={loading}
-              onClick={onLoadMore}
-              title="Visa fler"
-              aria-label="Visa fler"
-            >
-              <ButtonContent>Visa fler</ButtonContent>
-            </ButtonSecondary>
-          </FooterAction>
-        )}
-      </Footer>
-    </Wrapper>
-  );
-};
-
-export default Result;

package/src/components/SearchBar/index.tsx

@@ -1,48 +0,0 @@
-import React, { useCallback, useRef } from 'react';
-import InputSearch from '../InputSearch/index';
-import useOutsideClick from '../../hooks/useOutsideClick';
-
-interface SearchBarProps {
-  value: string;
-  setValue: (value: string) => void;
-  onSearch: (value: string) => void;
-}
-
-const SearchBar = ({ value, setValue, onSearch }: SearchBarProps) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  const onChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.currentTarget.value),
-    []
-  );
-
-  useOutsideClick(ref, () => setValue(''));
-
-  const _onSearch = useCallback(() => {
-    onSearch(value);
-  }, [value]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.keyCode === 13) {
-        _onSearch();
-      }
-    },
-    [value, _onSearch]
-  );
-
-  return (
-    <InputSearch
-      ref={ref}
-      value={value}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-      onSearch={_onSearch}
-      placeholder="Sök"
-      label="Sök"
-      id="main-search"
-    />
-  );
-};
-
-export default SearchBar;

package/src/components/SearchFilter/index.tsx

@@ -1,31 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import useSearch from '../../State/Search/useSearch';
-import SearchBar from '../SearchBar/index';
-
-const SearchFilter = () => {
-  const [value, setValue] = useState('');
-  const { queryFilter, onFilterUpdate } = useSearch();
-
-  const onSearch = useCallback(
-    (value: string) => {
-      const nextQuery = new URLSearchParams(queryFilter.searchParams);
-      if (value === nextQuery.get('query')) {
-        return;
-      }
-
-      if (value) {
-        nextQuery.set('query', value);
-      } else {
-        nextQuery.delete('qquery');
-      }
-
-      onFilterUpdate(nextQuery.toString());
-      setValue('');
-    },
-    [queryFilter]
-  );
-
-  return <SearchBar value={value} setValue={setValue} onSearch={onSearch} />;
-};
-
-export default SearchFilter;

package/src/components/SearchTerm/index.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Query, Clear } from './wrapper';
-import { IconCancel } from '../Icon/index';
-
-interface Props {
-  children: string;
-  onClear?: () => void;
-  clearTitle?: string;
-}
-
-const SearchTerm = ({ children, onClear, clearTitle }: Props) => (
-  <Wrapper>
-    <Query>{children}</Query>
-    {onClear && (
-      <Clear onClick={onClear} title={clearTitle ? clearTitle : 'Rensa fritext'}>
-        <IconCancel block />
-      </Clear>
-    )}
-  </Wrapper>
-);
-
-export default SearchTerm;

package/src/components/SectionHeader/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Heading, Action } from './wrapper';
-import { ButtonClear, ButtonContent } from '../Button/index';
-
-interface Props {
-  children: React.ReactNode;
-  onClick?: () => void;
-  actionTitle?: string;
-}
-
-const SectionHeader = ({ children, onClick, actionTitle }: Props) => (
-  <Wrapper>
-    <Heading>{children}</Heading>
-    {onClick && actionTitle && (
-      <Action>
-        <ButtonClear as="a" href="#" onClick={onClick}>
-          <ButtonContent>{actionTitle}</ButtonContent>
-        </ButtonClear>
-      </Action>
-    )}
-  </Wrapper>
-);
-
-export default SectionHeader;

package/src/components/Snackbar/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Icon, Content, Heading, Message } from './wrapper';
-
-import { IconCheck, IconInfo, IconExclamationCircle, IconExclamationTriangle } from '../Icon/index';
-
-interface Props {
-  severity?: string;
-  icon?: boolean;
-  heading?: string;
-  children?: React.ReactNode;
-}
-
-const Snackbar = ({ severity, icon, heading, children }: Props) => {
-  let iconSelector = <IconInfo block />;
-  if (severity === 'error') {
-    iconSelector = <IconExclamationCircle block />;
-  } else if (severity === 'warning') {
-    iconSelector = <IconExclamationTriangle block />;
-  } else if (severity === 'success') {
-    iconSelector = <IconCheck block />;
-  }
-
-  return (
-    <Wrapper severity={severity}>
-      {icon && <Icon>{iconSelector}</Icon>}
-      <Content>
-        {heading && <Heading>{heading}</Heading>}
-        <Message>{children}</Message>
-      </Content>
-    </Wrapper>
-  );
-};
-
-export default Snackbar;

package/src/components/Snackbar/wrapper.tsx

@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import theme from '../../layout/theme';
-
-const getSnackbarBg = (severity: string | undefined): string => {
-  let bg = theme.color.accent;
-
-  if (severity === 'error') {
-    bg = theme.color.ui.negativeLight;
-  } else if (severity === 'warning') {
-    bg = theme.color.ui.neutralLight;
-  } else if (severity === 'info') {
-    bg = theme.color.ui.infoLight;
-  } else if (severity === 'success') {
-    bg = theme.color.ui.positiveLight;
-  }
-
-  return bg;
-};
-
-interface Wrapper {
-  severity?: string;
-}
-export const Wrapper = styled.div.attrs(() => ({
-  role: 'alert',
-}))<Wrapper>`
-  display: flex;
-  align-items: center;
-  padding: ${size(1.5)} ${size(2)};
-  background-color: ${(props): string => getSnackbarBg(props.severity)};
-  color: ${(props): string => props.theme.color.textDark};
-  border-radius: 3px;
-`;
-
-export const Icon = styled.div`
-  flex-shrink: 0;
-  padding-right: ${size(2)};
-  font-size: ${size(3)};
-
-  > svg {
-    display: block;
-  }
-`;
-
-export const Content = styled.div`
-  flex: 1 1 auto;
-  font-size: 1rem;
-`;
-
-export const Heading = styled.div`
-  font-weight: 700;
-`;
-
-export const Message = styled.div`
-  > * {
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-`;

package/src/components/SortSelect/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Select, Option, Icon } from './wrapper';
-import { IconChevronDown } from '../Icon/index';
-import { DrivingDistance } from '../../@types/codegen';
-
-export interface OptionProps {
-  value: number | string | DrivingDistance;
-  displayName?: number | string;
-}
-
-interface SortSelectProps {
-  value: string | number;
-  options: OptionProps[];
-  unit?: string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-}
-
-const SortSelect = ({ value, options, onChange, unit }: SortSelectProps) => (
-  <Wrapper>
-    <Select value={value} onChange={onChange} title="Sortering" aria-label="Sortering">
-      {options.map((option) => (
-        <Option key={option.value} value={option.value}>
-          {option.displayName || option.value}
-          {unit ? ` ${unit}` : ''}
-        </Option>
-      ))}
-    </Select>
-    <Icon>
-      <IconChevronDown block />
-    </Icon>
-  </Wrapper>
-);
-
-export default SortSelect;

package/src/components/Sphere/Sphere.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import SphereViewer from './SphereViewer';
-
-import { ImageFull } from '../Gallery/wrapper';
-import MediaButton from '../Gallery/MediaButton';
-
-const onMediaClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, func: () => void) => {
-  e.stopPropagation();
-  e.preventDefault();
-  func();
-};
-
-type PropsType = {
-  url: string;
-  preview: string;
-  navigationDisabled: boolean;
-  visible: boolean;
-  onDisableNavigation: () => void;
-};
-
-const Sphere = ({ url, preview, visible, onDisableNavigation, navigationDisabled }: PropsType) => {
-  if (!visible || (!navigationDisabled && visible)) {
-    return (
-      <>
-        <ImageFull src={preview} alt="alt" />
-        <MediaButton
-          text="Starta 360° interiört"
-          onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void =>
-            onMediaClick(e, onDisableNavigation)
-          }
-        />
-      </>
-    );
-  }
-  if (navigationDisabled && visible) {
-    return (
-      <SphereViewer
-        id={url}
-        preview={url}
-        src={url}
-        autoLoad={true}
-        onStart={onDisableNavigation}
-      />
-    );
-  }
-  return null;
-};
-
-export default Sphere;

package/src/components/Sphere/SphereLightbox.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import SphereViewer from './SphereViewer';
-
-type PropsType = {
-  url: string;
-};
-
-const SphereLightbox = ({ url }: PropsType) => (
-  <SphereViewer id={url} src={url} preview={url} autoLoad />
-);
-
-export default SphereLightbox;