wix-style-react/src/AddressInputItem/AddressInputItem.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';

import ListItemSelect from '../ListItemSelect';
import Text from '../Text';
import Box from '../Box';
import LocationIcon from 'wix-ui-icons-common/Location';
import { st, classes } from './AddressInputItem.st.css';

/** This component is used to display an address item mainly in <AddressInput/> component. */
class AddressInputItem extends React.PureComponent {
  render() {
    const {
      dataHook,
      className,
      secondaryLabel,
      optionLayout,
      mainLabel,
      suffix,
      prefix,
      disabled,
      selected,
      highlighted,
      onClick,
    } = this.props;

    const textProps = {
      tagName: 'div',
      ellipsis: true,
      skin: disabled ? 'disabled' : 'standard',
      light: selected,
    };

    return (
      <ListItemSelect
        dataHook={dataHook}
        className={st(classes.root, { optionLayout }, className)}
        subtitle={secondaryLabel}
        title={<Text {...textProps}>{mainLabel}</Text>}
        suffix={<Box>{suffix}</Box>}
        prefix={<Box>{prefix}</Box>}
        ellipsis
        disabled={disabled}
        selected={selected}
        highlighted={highlighted}
        onClick={onClick}
      />
    );
  }
}

export const addressInputItemBuilder = ({
  id,
  className,
  prefix,
  mainLabel,
  secondaryLabel,
  suffix,
  disabled,
  dataHook,
  optionLayout,
  onClick,
  displayLabel,
}) => ({
  id,
  disabled,
  overrideOptionStyle: true,
  label: displayLabel,
  value: ({ selected, hovered, ...rest }) => (
    <AddressInputItem
      optionLayout={optionLayout}
      dataHook={dataHook}
      className={className}
      prefix={prefix}
      mainLabel={mainLabel}
      secondaryLabel={secondaryLabel}
      suffix={suffix}
      selected={selected}
      highlighted={hovered}
      onClick={onClick}
      {...rest}
    />
  ),
});

AddressInputItem.displayName = 'AddressInputItem';

AddressInputItem.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** Specifies a CSS class name to be appended to the component’s root element */
  className: PropTypes.string,

  /** Sets the main label of an option. This label is a primary part that is matched to a search term or keyword. */
  mainLabel: PropTypes.string,

  /** Sets the additional information of an address. Usually contains a region or a country. */
  secondaryLabel: PropTypes.string,

  /** Sets the layout of mainLabel and secondaryLabel. Labels can be either side by side or stacked vertically. */
  optionLayout: PropTypes.oneOf(['single-line', 'double-line']),

  /** Pass a component you want to show as the prefix of the input, e.g., text, icon. */
  prefix: PropTypes.node,

  /** Pass a component you want to show as the suffix of the input, e.g., text, icon, button. */
  suffix: PropTypes.node,

  /** Specifies whether the option is selected. */
  selected: PropTypes.bool,

  /** Specifies whether option is highlighted */
  highlighted: PropTypes.bool,

  /** Specifies whether option is disabled */
  disabled: PropTypes.bool,

  /** Defines a callback function which is called every time option is clicked */
  onClick: PropTypes.func,
};

AddressInputItem.defaultProps = {
  optionLayout: 'single-line',
  prefix: <LocationIcon />,
};

export default AddressInputItem;