@maksim-tolo/react-wheel-picker/dist/components/WheelPickerItem.js

<div align="center"> <h1>react-simple-wheel-picker</h1> <img src="https://raw.githubusercontent.com/keiya01/react-simple-wheel-picker/master/demo.gif" alt="demo"> <br> <a href="https://react-simple-wheel-picker.now.sh">https://react-simple-wheel-pick

"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const optionID_1 = require("../constants/optionID");
const Item = styled_components_1.default.li `
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
  cursor: pointer;
  ${(props) => `
    min-height: ${props.height}px;
    ${props.selected
    ? `
    background: #EEEEF0;
    border-radius: 6px;
    `
    : ""}
  `}
  &:focus {
    outline: none;
  }
`;
const Text = styled_components_1.default.p `
  margin: auto;
  text-align: left;
  word-wrap: break-word;
  padding-left: 10px;
`;
const WheelPickerItem = ({ id, value, activeID, height, color, activeColor, fontSize, onClick, onFocus }, ref) => {
    const selected = react_1.useMemo(() => id === activeID, [id, activeID]);
    const textColor = react_1.useMemo(() => (selected ? activeColor : color), [
        activeColor,
        color,
        selected
    ]);
    const textStyle = react_1.useMemo(() => ({
        color: textColor,
        fontSize
    }), [fontSize, textColor]);
    return (react_1.default.createElement(Item, { role: "option", selected: selected, "aria-selected": selected, "aria-label": value.toString(), ref: ref, id: `${optionID_1.OPTION_ID}${id}`, "data-itemid": id, "data-itemvalue": value, height: height, onClick: onClick, onFocus: onFocus, tabIndex: 0 },
        react_1.default.createElement(Text, { style: textStyle }, value)));
};
exports.default = react_1.forwardRef(WheelPickerItem);
//# sourceMappingURL=WheelPickerItem.js.map