react-simple-wheel-picker/dist/components/WheelPicker.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> <p>You can set up simple and flexible wheel picker</p> <br> </div> <hr/>

"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 WheelPickerItem_1 = __importDefault(require("../components/WheelPickerItem"));
const useObserver_1 = __importDefault(require("../hooks/useObserver"));
const optionID_1 = require("../constants/optionID");
const useHandleKeyboard_1 = __importDefault(require("../hooks/useHandleKeyboard"));
const List = styled_components_1.default.ul `
  position: relative;
  margin: 0;
  padding: 0;
  display: inline-block;
  list-style: none;
  overflow-y: scroll;
  will-change: transform;
  overflow-x: hidden;
  text-align: center;
  padding: 0 20px;
  ${(props) => `
    height: ${props.height}px;
    width: ${props.width};
    background-color: ${props.backgroundColor};
    box-shadow: 1px 3px 10px ${props.shadowColor} inset;
    &:focus {
      outline: 2px solid ${props.focusColor};
    }
  `}
`;
const calculateSpaceHeight = (height, itemHeight) => {
    const limit = height / itemHeight / 2 - 0.5;
    return itemHeight * limit;
};
const setStyles = (styles) => {
    const _color = styles.color || "#fff";
    return {
        color: _color,
        activeColor: styles.activeColor || _color,
        fontSize: styles.fontSize || 16,
        backgroundColor: styles.backgroundColor || "#555",
        shadowColor: styles.shadowColor || "#333",
        width: styles.width ? `${styles.width}px` : "100%",
        focusColor: styles.focusColor ? styles.focusColor : "blue"
    };
};
const WheelPicker = ({ data, selectedID, onChange, height, itemHeight, idName, titleID, titleText, width, color, activeColor, fontSize, backgroundColor, shadowColor, focusColor, required }, ref) => {
    const [_itemHeight, setItemHeight] = react_1.useState(itemHeight);
    const { onKeyUp, onKeyPress } = useHandleKeyboard_1.default(_itemHeight);
    const { root, refs, activeID, onFocus } = useObserver_1.default(data, selectedID, _itemHeight, onChange);
    const styles = react_1.useMemo(() => setStyles({
        width,
        color,
        activeColor,
        fontSize,
        backgroundColor,
        shadowColor,
        focusColor
    }), [
        activeColor,
        backgroundColor,
        color,
        focusColor,
        fontSize,
        shadowColor,
        width
    ]);
    const spaceHeight = react_1.useMemo(() => calculateSpaceHeight(height, _itemHeight), [
        _itemHeight,
        height
    ]);
    const ariaActivedescendant = react_1.useMemo(() => {
        return `${optionID_1.OPTION_ID}${activeID}`;
    }, [activeID]);
    const handleOnClick = react_1.useCallback((e) => {
        if (root.current) {
            root.current.scrollTo(0, e.currentTarget.offsetTop - spaceHeight);
        }
    }, [root, spaceHeight]);
    react_1.useImperativeHandle(ref, () => ({
        focus: () => {
            root.current && root.current.focus();
        },
        blur: () => {
            root.current && root.current.blur();
        }
    }), [root]);
    react_1.useEffect(() => {
        const adjustItemHeight = () => {
            let maxHeight = itemHeight;
            Object.keys(refs).map(id => {
                const elm = refs[id].current;
                if (!elm) {
                    return;
                }
                const h = elm.clientHeight;
                if (h > maxHeight) {
                    maxHeight = h;
                }
            });
            return maxHeight;
        };
        setItemHeight(adjustItemHeight());
    }, [itemHeight, refs]);
    return (react_1.default.createElement(List, { id: idName, tabIndex: 0, role: "listbox", "aria-labelledby": titleID, "aria-label": titleText, "aria-required": required, "aria-activedescendant": ariaActivedescendant, ref: root, "data-testid": "picker-list", height: height, width: styles.width, backgroundColor: styles.backgroundColor, shadowColor: styles.shadowColor, focusColor: styles.focusColor, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onKeyDown: onKeyPress },
        react_1.default.createElement("div", { style: { height: spaceHeight } }),
        data.map(item => (react_1.default.createElement(WheelPickerItem_1.default, Object.assign({ key: item.id }, item, styles, { height: _itemHeight, activeID: activeID, onClick: handleOnClick, onFocus: onFocus, ref: refs[item.id] })))),
        react_1.default.createElement("div", { style: { height: spaceHeight } })));
};
exports.default = react_1.forwardRef(WheelPicker);
//# sourceMappingURL=WheelPicker.js.map