maisonsport-common-ui
Version:
Suite of styled-components to be consumed by the React-Native App and by the Web (via React-Native for Web)
253 lines (227 loc) • 8.35 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.selectBoxOptionCheckID = exports.selectBoxOptionTextID = exports.selectBoxOptionIconID = exports.selectBoxOption = exports.selectBoxOptionsContainer = exports.selectBoxSelectedValueText = exports.selectBoxIconID = exports.selectBoxID = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _native = require("styled-components/native");
var _theme = _interopRequireDefault(require("../../theme"));
var _Box = _interopRequireDefault(require("../../atoms/Box"));
var _Touchable = _interopRequireDefault(require("../../atoms/Touchable"));
var _Scrollable = _interopRequireDefault(require("../../atoms/Scrollable"));
var _Text = _interopRequireDefault(require("../../atoms/Text"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const selectBoxID = 'select-box-id';
exports.selectBoxID = selectBoxID;
const selectBoxIconID = 'select-box-icon';
exports.selectBoxIconID = selectBoxIconID;
const selectBoxSelectedValueText = 'select-box-selected-value-text';
exports.selectBoxSelectedValueText = selectBoxSelectedValueText;
const selectBoxOptionsContainer = 'select-box-options-container';
exports.selectBoxOptionsContainer = selectBoxOptionsContainer;
const selectBoxOption = 'select-box-option';
exports.selectBoxOption = selectBoxOption;
const selectBoxOptionIconID = 'select-box-option-icon';
exports.selectBoxOptionIconID = selectBoxOptionIconID;
const selectBoxOptionTextID = 'select-box-option-text';
exports.selectBoxOptionTextID = selectBoxOptionTextID;
const selectBoxOptionCheckID = 'select-box-option-check';
exports.selectBoxOptionCheckID = selectBoxOptionCheckID;
function optionsHasDuplicates(opts) {
const optionValues = opts.map(({
value
}) => value);
return optionValues.length !== [...new Set(optionValues)].length;
}
function SelectIcon({
Icon,
...props
}) {
if (Icon) {
if (typeof Icon === 'string') {
const src = {
uri: Icon
}; // eslint-disable-next-line jsx-a11y/alt-text
return /*#__PURE__*/_react.default.createElement(_reactNative.Image, _extends({
source: src
}, props));
}
return /*#__PURE__*/_react.default.createElement(Icon, props);
}
return null;
}
const SELECT_HEIGHT = 60;
function SelectBox({
placeholder,
value,
options,
onSelect,
iconPosition = 'right',
Icon,
disabled = false
}) {
var _options$find;
if (optionsHasDuplicates(options)) {
// eslint-disable-next-line no-console
console.warn('The options you have provided have multiples of the same `value`, this will cause rendering issues. Make sure each option has a unique `value` key.');
}
const [open, setOpen] = _react.default.useState(false);
const [highlighted, setHighlighted] = _react.default.useState('');
const [chevronPos] = _react.default.useState(new _reactNative.Animated.Value(0));
_react.default.useEffect(() => {
_reactNative.Animated.timing(chevronPos, {
toValue: open ? 1 : 0,
duration: 300,
useNativeDriver: true
}).start();
}, [open]);
const displayValue = ((_options$find = options.find(({
value: oV
}) => oV === value)) === null || _options$find === void 0 ? void 0 : _options$find.label) || placeholder;
const commonItemProps = {
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 4,
paddingRight: 3,
paddingY: 3,
borderWidth: 0.1,
borderColor: 'grey'
};
const chevronAngle = chevronPos.interpolate({
inputRange: [0, 1],
outputRange: ['90deg', '-90deg']
});
return /*#__PURE__*/_react.default.createElement(_native.ThemeProvider, {
theme: _theme.default
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
noWrapTheme: true,
marginBottom: 3,
style: {
position: 'relative'
}
}, /*#__PURE__*/_react.default.createElement(_Touchable.default, _extends({
disabled: disabled,
testID: selectBoxID,
noWrapTheme: true,
justifyContent: "space-between",
height: SELECT_HEIGHT,
style: [{
borderRadius: 5,
tabIndex: 0,
opacity: disabled ? 0.5 : 1
}, open && {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}],
onPress: () => setOpen(o => !o)
}, commonItemProps), /*#__PURE__*/_react.default.createElement(_Box.default, {
noWrapTheme: true,
flexDirection: "row",
alignItems: "center"
}, iconPosition === 'right' && /*#__PURE__*/_react.default.createElement(_Text.default, {
touchable: false,
noWrapTheme: true,
padding: 0,
marginRight: 3,
color: value ? null : 'grey',
fontSize: 2,
testID: selectBoxSelectedValueText
}, displayValue), /*#__PURE__*/_react.default.createElement(SelectIcon, _extends({
Icon
}, {
testID: selectBoxIconID
})), iconPosition === 'left' && /*#__PURE__*/_react.default.createElement(_Text.default, {
touchable: false,
noWrapTheme: true,
padding: 0,
marginLeft: 3,
color: value ? null : 'grey',
fontSize: 2,
testID: selectBoxSelectedValueText
}, displayValue)), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.Image, {
source: require('../../assets/images/chevron.png'),
style: {
width: 10,
height: 10,
transform: [{
rotate: chevronAngle
}]
}
})), open && /*#__PURE__*/_react.default.createElement(_Scrollable.default, {
testID: selectBoxOptionsContainer,
noWrapTheme: true,
borderBottomLeftRadius: 5,
borderBottomRightRadius: 5,
borderWidth: commonItemProps.borderWidth,
borderTopWidth: 0,
borderColor: commonItemProps.borderColor,
overflow: "hidden",
onMouseLeave: () => setHighlighted(''),
maxHeight: 225,
style: {
position: 'absolute',
top: SELECT_HEIGHT,
width: '100%'
},
contentContainerStyle: {
paddingBottom: 0
}
}, options.map(({
value: optValue,
label,
Icon: optIcon
}, i) => {
const isSelected = optValue === value;
const isHighlighted = optValue === highlighted;
return /*#__PURE__*/_react.default.createElement(_Touchable.default, _extends({
testID: "".concat(selectBoxOption, "_").concat(optValue),
noWrapTheme: true,
tabIndex: 0,
key: optValue,
backgroundColor: isHighlighted ? 'lightGrey' : 'white',
justifyContent: "space-between",
onPress: () => {
onSelect(optValue);
setOpen(false);
},
onMouseEnter: () => setHighlighted(optValue)
}, commonItemProps, {
borderWidth: 0,
borderBottomWidth: i === options.length - 1 ? 0 : commonItemProps.borderWidth
}), /*#__PURE__*/_react.default.createElement(_Box.default, {
noWrapTheme: true,
flexDirection: "row",
alignItems: "center"
}, iconPosition === 'right' && /*#__PURE__*/_react.default.createElement(_Text.default, {
noWrapTheme: true,
touchable: false,
padding: 0,
marginRight: 3,
fontSize: 2,
testID: "".concat(selectBoxOptionTextID, "_").concat(optValue)
}, label), /*#__PURE__*/_react.default.createElement(SelectIcon, _extends({
Icon: optIcon
}, {
testID: "".concat(selectBoxOptionIconID, "_").concat(optValue)
})), iconPosition === 'left' && /*#__PURE__*/_react.default.createElement(_Text.default, {
noWrapTheme: true,
touchable: false,
padding: 0,
marginLeft: 3,
fontSize: 2,
testID: "".concat(selectBoxOptionTextID, "_").concat(optValue)
}, label)), isSelected && /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../assets/images/green_tick.png'),
style: {
width: 15,
height: 15
},
testID: "".concat(selectBoxOptionCheckID, "_").concat(optValue)
}));
}))));
}
var _default = SelectBox;
exports.default = _default;
//# sourceMappingURL=index.js.map