@codeurs/react-simple-wheel-picker
Version:
- This package is simple and flexible wheel picker for React - This package move like same as native applications picker - This package support accessibility
110 lines • 6.18 kB
JavaScript
;
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 });
var react_1 = __importStar(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var WheelPickerItem_1 = __importDefault(require("../components/WheelPickerItem"));
var useObserver_1 = __importDefault(require("../hooks/useObserver"));
var optionID_1 = require("../constants/optionID");
var useHandleKeyboard_1 = __importDefault(require("../hooks/useHandleKeyboard"));
var List = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n margin: 0;\n padding: 0;\n display: inline-block;\n list-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n text-align: center;\n padding: 0 20px;\n ", "\n"], ["\n position: relative;\n margin: 0;\n padding: 0;\n display: inline-block;\n list-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n text-align: center;\n padding: 0 20px;\n ",
"\n"])), function (props) { return "\n height: " + props.height + "px;\n width: " + props.width + ";\n background-color: " + props.backgroundColor + ";\n box-shadow: 1px 3px 10px " + props.shadowColor + " inset;\n &:focus {\n outline: 2px solid " + props.focusColor + ";\n }\n "; });
var calculateSpaceHeight = function (height, itemHeight) {
var limit = height / itemHeight / 2 - 0.5;
return itemHeight * limit;
};
var setStyles = function (styles) {
var _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"
};
};
var WheelPicker = function (_a, ref) {
var data = _a.data, selectedID = _a.selectedID, onChange = _a.onChange, height = _a.height, itemHeight = _a.itemHeight, idName = _a.idName, titleID = _a.titleID, titleText = _a.titleText, width = _a.width, color = _a.color, activeColor = _a.activeColor, fontSize = _a.fontSize, backgroundColor = _a.backgroundColor, shadowColor = _a.shadowColor, focusColor = _a.focusColor, required = _a.required;
var _b = react_1.useState(itemHeight), _itemHeight = _b[0], setItemHeight = _b[1];
var _c = useHandleKeyboard_1.default(_itemHeight), onKeyUp = _c.onKeyUp, onKeyPress = _c.onKeyPress;
var _d = useObserver_1.default(data, selectedID, _itemHeight, onChange), root = _d.root, refs = _d.refs, activeID = _d.activeID;
var styles = setStyles({
width: width,
color: color,
activeColor: activeColor,
fontSize: fontSize,
backgroundColor: backgroundColor,
shadowColor: shadowColor,
focusColor: focusColor
});
var spaceHeight = react_1.useMemo(function () { return calculateSpaceHeight(height, _itemHeight); }, [
_itemHeight,
height
]);
var ariaActivedescendant = react_1.useMemo(function () {
return "" + optionID_1.OPTION_ID + activeID;
}, [activeID]);
var handleOnClick = function (e) {
if (root.current) {
root.current.scrollTo(0, e.currentTarget.offsetTop - spaceHeight);
}
};
react_1.useImperativeHandle(ref, function () { return ({
focus: function () {
root.current && root.current.focus();
},
blur: function () {
root.current && root.current.blur();
}
}); }, [root]);
react_1.useEffect(function () {
var adjustItemHeight = function () {
var maxHeight = itemHeight;
Object.keys(refs).map(function (id) {
var elm = refs[id].current;
if (!elm) {
return;
}
var 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(function (item) { return (react_1.default.createElement(WheelPickerItem_1.default, __assign({ key: item.id }, item, styles, { height: _itemHeight, activeID: activeID, onClick: handleOnClick, ref: refs[item.id] }))); }),
react_1.default.createElement("div", { style: { height: spaceHeight } })));
};
exports.default = react_1.forwardRef(WheelPicker);
var templateObject_1;
//# sourceMappingURL=WheelPicker.js.map