@onesy/ui-react
Version:
UI for React
393 lines (392 loc) • 17.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialMoodW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialMoodW100"));
var _IconMaterialEmojiNatureW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialEmojiNatureW100"));
var _IconMaterialEmojiFoodBeverageW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialEmojiFoodBeverageW100"));
var _IconMaterialHikingW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialHikingW100"));
var _IconMaterialEmojiTransportationW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialEmojiTransportationW100"));
var _IconMaterialEmojiObjectsW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialEmojiObjectsW100"));
var _IconMaterialEmojiSymbolsW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialEmojiSymbolsW100"));
var _IconMaterialEmojiFlagsW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialEmojiFlagsW100"));
var _Menu = _interopRequireDefault(require("../Menu/Menu"));
var _Line = _interopRequireDefault(require("../Line"));
var _SpyScroll = _interopRequireDefault(require("../SpyScroll"));
var _List = _interopRequireDefault(require("../List"));
var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
var _Tabs = _interopRequireDefault(require("../Tabs"));
var _TextField = _interopRequireDefault(require("../TextField"));
var _Tab = _interopRequireDefault(require("../Tab"));
var _Type = _interopRequireDefault(require("../Type"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _emojis_list = _interopRequireDefault(require("./emojis_list"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["tonal", "color", "label", "onSelect", "emojis", "categories", "selected", "size", "search", "tabs", "className"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
root: {},
wrapper: {
height: '70vh',
width: '70vw',
borderRadius: theme.methods.shape.radius.value(2, 'px'),
boxShadow: 'rgba(0, 0, 0, 0.07) 0px 4px 32px 0px',
overflow: 'hidden'
},
size_small: {
maxWidth: 276,
maxHeight: 276
},
size_regular: {
maxWidth: 340,
maxHeight: 340
},
size_large: {
maxWidth: 404,
maxHeight: 404
},
main: {
position: 'relative',
height: 0,
overflow: 'hidden auto'
},
header: {
padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(1.5, 'px')} 0`
},
categories: {
height: '100%',
userSelect: 'none'
},
category: {
paddingInlineStart: theme.methods.space.value(1.5, 'px')
},
emoji: {
position: 'relative',
textAlign: 'center',
cursor: 'pointer',
transition: theme.methods.transitions.make('transform'),
'&$emoji_selected': {
'&::before': {
content: '""',
position: 'absolute',
width: 'calc(100% + 4px)',
height: 'auto',
aspectRatio: '1/1',
background: theme.palette.background.default.tertiary,
inset: '0',
borderRadius: theme.methods.shape.radius.value(40, 'px'),
zIndex: '0',
left: '50%',
transform: 'translate(-50%)',
top: '-1px'
}
},
'&:active': {
transform: 'scale(0.94)'
}
},
emoji_size_small: {
fontSize: '1.5rem',
width: 24
},
emoji_size_regular: {
fontSize: '2rem',
width: 32
},
emoji_size_large: {
fontSize: '2.5rem',
width: 40
},
unicode: {
position: 'relative',
zIndex: 1
},
subheader: {
backdropFilter: 'blur(2px)',
background: 'transparent',
'&.onesy-ListSubheader-root': {
zIndex: 14
}
},
tabs: {
'&.onesy-Tabs-root': {
background: 'transparent'
},
'& .onesy-Tabs-tabs': {
minWidth: '100%'
}
},
tab: {
'&.onesy-Tab-root': {
minWidth: 'unset'
}
},
tab_size_small: {
'&.onesy-Tab-root': {
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(0.75, 'px')}`
}
},
tab_size_regular: {
'&.onesy-Tab-root': {
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.25, 'px')}`
}
},
tab_size_large: {
'&.onesy-Tab-root': {
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.25, 'px')}`
}
}
}), {
name: 'onesy-Emojis'
});
const Emojis = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyEmojis) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Menu = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Menu) || _Menu.default;
const List = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.List) || _List.default;
const ListSubheader = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.ListSubheader) || _ListSubheader.default;
const SpyScroll = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.SpyScroll) || _SpyScroll.default;
const Tabs = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Tabs) || _Tabs.default;
const TextField = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.TextField) || _TextField.default;
const Tab = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Tab) || _Tab.default;
const Type = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Type) || _Type.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.Surface) || _Surface.default;
const EMOJI_CATEGORIES = _react.default.useMemo(() => {
return [{
"name": l("Smileys and People"),
"groups": ["Smiley", "Gesture", "Person", "Clothing"],
"icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialMoodW.default, {})
}, {
"name": l("Animals and Nature"),
"groups": ["Animal", "Nature"],
"icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiNatureW.default, {})
}, {
"name": l("Food and Drink"),
"groups": ["Food"],
"icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiFoodBeverageW.default, {})
}, {
"name": l("Activity"),
"groups": ["Activity"],
"icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialHikingW.default, {})
}, {
"name": l("Travel and Places"),
"groups": ["Travel"],
"icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiTransportationW.default, {})
}, {
"name": l("Objects"),
"groups": ["Object"],
"icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiObjectsW.default, {})
}, {
"name": l("Symbols"),
"groups": ["Symbol"],
"icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiSymbolsW.default, {})
}, {
"name": l("Flags and Countries"),
"groups": ["Flag", "Country"],
"icon": /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialEmojiFlagsW.default, {})
}];
}, []);
const {
tonal = true,
color = 'themed',
label: label_,
onSelect: onSelect_,
emojis = _emojis_list.default,
categories = EMOJI_CATEGORIES,
selected,
size = 'regular',
search: search_ = true,
tabs: tabs_ = true,
className
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const [open, setOpen] = _react.default.useState(false);
const [openElement, setOpenElement] = _react.default.useState();
const [search, setSearch] = _react.default.useState();
const [tab, setTab] = _react.default.useState(categories[0].name);
const refs = {
main: _react.default.useRef(undefined)
};
const onOpen = () => {
setOpen(true);
setTimeout(() => {
setOpenElement(refs.main.current || null);
}, 140);
};
const onClose = () => {
setOpen(false);
setTimeout(() => {
setOpenElement(null);
setSearch('');
}, 140);
};
const onSelect = valueNew => {
if ((0, _utils.is)('function', onSelect_)) onSelect_(valueNew);
};
const emojisPerCategory = _react.default.useMemo(() => {
const value = {};
if ((0, _utils.is)('array', categories)) {
categories.forEach(item => {
const groups = {};
emojis.forEach(emoji => {
const alias = ((0, _utils.is)('array', emoji.alias) ? emoji.alias : [emoji.alias]).join('').toLowerCase();
if (item.groups.includes(emoji.category) && (!search || alias.includes(search.toLowerCase()))) {
if (!groups[emoji.category]) groups[emoji.category] = [];
groups[emoji.category].unshift(emoji);
}
});
value[item.name] = [];
item.groups.forEach(group => {
var _groups$group;
if (!!((_groups$group = groups[group]) !== null && _groups$group !== void 0 && _groups$group.length)) value[item.name].push(...groups[group]);
});
});
Object.keys(value).forEach(item_0 => {
if (!value[item_0].length) delete value[item_0];
});
}
return value;
}, [search, emojis, categories]);
const onChangeSearch = (0, _utils.debounce)(valueNew_0 => {
setSearch(valueNew_0);
}, 140);
const onChangeTabs = valueNew_1 => {
setTab(valueNew_1);
};
const onActiveTab = valueNew_2 => {
setTab(valueNew_2.replace(/-/g, ' '));
};
const onTabClick = valueNew_3 => {
var _refs$main$current;
const elements = Array.from(((_refs$main$current = refs.main.current) === null || _refs$main$current === void 0 ? void 0 : _refs$main$current.children) || []);
if (!!elements.length) {
const element = elements.find(item_1 => item_1.dataset.onesyCategory === valueNew_3);
if (element) {
const top = element.offsetTop;
const offset = -1;
refs.main.current.scroll({
left: 0,
top: (0, _utils.clamp)(top - offset, 0),
behavior: 'smooth'
});
}
}
};
const categoriesUsed = Object.keys(emojisPerCategory);
const categoryToID = valueNew_4 => valueNew_4.replace(/ /g, '-');
const categoriesUsedIDs = categoriesUsed.map(item_2 => categoryToID(item_2));
const tabs = categories.filter(item_3 => categoriesUsed.some(item_ => item_3.name === item_)).map(item_4 => ({
name: item_4.icon,
value: item_4.name
}));
const label = /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
tonal: tonal,
color: color,
Component: Surface,
className: (0, _styleReact.classNames)([classes.wrapper, classes[`size_${size}`]]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpyScroll, {
ids: categoriesUsedIDs,
parent: openElement,
onActive: onActiveTab,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
align: "unset",
justify: "unset",
fullWidth: true,
className: classes.categories,
children: [(search_ || tabs_) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
fullWidth: true,
className: classes.header,
children: [search_ && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, {
name: l('Search'),
version: "outlined",
value: search || '',
onChange: onChangeSearch,
size: ['small', 'regular'].includes(size) ? 'small' : 'regular',
fullWidth: true,
clear: true
}), tabs_ && !!categoriesUsed.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tabs, {
valueDefault: tab,
value: tab,
onChange: onChangeTabs,
size: "small",
initialLineUpdateTimeout: 440,
noDivider: true,
className: classes.tabs,
children: tabs.map((item_5, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tab, {
value: item_5.value,
onClick: () => onTabClick(item_5.value),
"data-onesy-spy-scroll": categoryToID(item_5.value),
className: (0, _styleReact.classNames)([classes.tab, classes[`tab_size_${size}`]]),
children: /*#__PURE__*/_react.default.cloneElement(item_5.name, {
size: ['small', 'regular'].includes(size) ? 'small' : 'regular'
})
}, index))
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
ref: refs.main,
gap: 0,
flex: true,
fullWidth: true,
className: classes.main,
children: categoriesUsed.map((item_6, index_0) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(List, {
gap: 1,
fullWidth: true,
SurfaceProps: {
id: categoryToID(item_6),
'data-onesy-category': item_6
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ListSubheader, {
className: classes.subheader,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
children: item_6
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 1,
direction: "row",
align: "center",
wrap: "wrap",
Component: "li",
className: classes.category,
children: emojisPerCategory[item_6].map((emoji_0, index_) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
onClick: () => onSelect(emoji_0),
title: (0, _utils.capitalize)(((0, _utils.is)('array', emoji_0.alias) ? emoji_0.alias.join(', ') : emoji_0.alias).replace(/_/g, ' ')),
className: (0, _styleReact.classNames)([classes.emoji, classes[`emoji_size_${size}`], (selected === null || selected === void 0 ? void 0 : selected.includes(emoji_0.unicode)) && classes.emoji_selected]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: classes.unicode,
children: emoji_0.unicode
})
}, index_))
})]
}, index_0))
})]
})
})
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, _objectSpread({
open: open,
onOpen: onOpen,
onClose: onClose,
label: label,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Emojis', theme) && ['onesy-Emojis-root', `onesy-Emojis-size-${size}`], className, classes.root])
}, other));
};
Emojis.displayName = 'onesy-Emojis';
var _default = exports.default = Emojis;