@wix/design-system
Version:
@wix/design-system
37 lines • 2.32 kB
JavaScript
import React from 'react';
import ListItemSelect from '../ListItemSelect';
import Text from '../Text';
import Box from '../Box';
import { Location } from '@wix/wix-ui-icons-common';
import { st, classes } from './AddressInputItem.st.css.js';
import { IconThemeContext } from '../WixDesignSystemIconThemeProvider/IconThemeContext';
/** 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 (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => {
const LocationIcon = icons.AddressInputItem?.Location || Location;
const defaultPrefix = prefix !== undefined ? prefix : React.createElement(LocationIcon, null);
return (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, defaultPrefix), ellipsis: true, disabled: disabled, selected: selected, highlighted: highlighted, onClick: onClick }));
}));
}
}
AddressInputItem.displayName = 'AddressInputItem';
AddressInputItem.defaultProps = {
optionLayout: 'single-line',
};
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