wix-style-react
Version:
wix-style-react
50 lines • 2.52 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import ListItemSelect from '../ListItemSelect';
import Text from '../Text';
import Box from '../Box';
import { Location as LocationIcon } from '@wix/wix-ui-icons-common';
import { st, classes } from './AddressInputItem.st.css';
import { OPTION_LAYOUT } from './constants';
/** 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 (
// @ts-ignore
React.createElement(ListItemSelect, { dataHook: dataHook, className: st(classes.root, { optionLayout }, className), subtitle: secondaryLabel, title: React.createElement(Text, { ...textProps }, mainLabel), suffix: React.createElement(Box, null, suffix), prefix: React.createElement(Box, null, prefix), ellipsis: true, disabled: disabled, selected: selected, highlighted: highlighted, onClick: onClick }));
}
}
AddressInputItem.displayName = 'AddressInputItem';
AddressInputItem.defaultProps = {
optionLayout: 'single-line',
prefix: React.createElement(LocationIcon, null),
};
AddressInputItem.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
mainLabel: PropTypes.string,
secondaryLabel: PropTypes.string,
optionLayout: PropTypes.oneOf(Object.values(OPTION_LAYOUT)),
prefix: PropTypes.node,
suffix: PropTypes.node,
selected: PropTypes.bool,
disabled: PropTypes.bool,
highlighted: PropTypes.bool,
onClick: PropTypes.func,
};
export const addressInputItemBuilder = ({ id, className, prefix, mainLabel, secondaryLabel, suffix, disabled, dataHook, optionLayout, onClick, displayLabel, }) => ({
id,
disabled,
overrideOptionStyle: true,
label: displayLabel,
value: ({ selected, hovered, ...rest }) => (React.createElement(AddressInputItem, { optionLayout: optionLayout, dataHook: dataHook, className: className, prefix: prefix, mainLabel: mainLabel, secondaryLabel: secondaryLabel, suffix: suffix, selected: selected, highlighted: hovered, onClick: onClick, ...rest })),
});
export default AddressInputItem;
//# sourceMappingURL=AddressInputItem.js.map