diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx index d94ceb873..d17d4fbef 100644 --- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx +++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx @@ -197,7 +197,7 @@ const DropdownMenu = (props: IDropdownMenu) => { onOpen, onShiftClick, placement: initialPlacement = 'top', - src = require('@tabler/icons/outline/dots.svg'), + src = require('@phosphor-icons/core/regular/dots-three.svg'), title = 'Menu', width, } = props; diff --git a/packages/pl-fe/src/components/event-preview.tsx b/packages/pl-fe/src/components/event-preview.tsx index 3d457cbad..093f1e638 100644 --- a/packages/pl-fe/src/components/event-preview.tsx +++ b/packages/pl-fe/src/components/event-preview.tsx @@ -70,7 +70,7 @@ const EventPreview: React.FC = ({ status, className, hideAction,
- + diff --git a/packages/pl-fe/src/components/load-gap.tsx b/packages/pl-fe/src/components/load-gap.tsx index 8e4a97dca..428c47583 100644 --- a/packages/pl-fe/src/components/load-gap.tsx +++ b/packages/pl-fe/src/components/load-gap.tsx @@ -20,7 +20,7 @@ const LoadGap: React.FC = ({ disabled, maxId, onClick }) => { return ( ); }; diff --git a/packages/pl-fe/src/components/ui/multiselect.tsx.bak b/packages/pl-fe/src/components/ui/multiselect.tsx.bak deleted file mode 100644 index d9e6c3aba..000000000 --- a/packages/pl-fe/src/components/ui/multiselect.tsx.bak +++ /dev/null @@ -1,533 +0,0 @@ -import React, { useRef, useEffect } from 'react'; - -import Icon from './icon'; - -interface IMultiselectProps { - options: any; - // disablePreSelectedValues?: boolean; - selectedValues?: any; - displayValue: string; - placeholder?: string; - emptyRecordMsg?: string; - onSelect?: (selectedList:any, selectedItem: any) => void; - onRemove?: (selectedList:any, selectedItem: any) => void; - disable?: boolean; - className?: string; -} - -function useOutsideAlerter(ref, clickEvent) { - useEffect(() => { - function handleClickOutside(event) { - if (ref.current && !ref.current.contains(event.target)) { - clickEvent(); - } - } - - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [ref]); -} - -/** -* Component that alerts if you click outside of it -*/ -function OutsideAlerter(props) { - const wrapperRef = useRef(null); - useOutsideAlerter(wrapperRef, props.outsideClick); - return
{props.children}
; -} - -/** - * - */ -export class Multiselect extends React.Component { - - static defaultProps: IMultiselectProps; - /** - * - */ - constructor(props: IMultiselectProps) { - super(props); - this.state = { - inputValue: '', - options: props.options, - filteredOptions: props.options, - unfilteredOptions: props.options, - selectedValues: Object.assign([], props.selectedValues), - preSelectedValues: Object.assign([], props.selectedValues), - toggleOptionsList: false, - highlightOption: 0, - // keepSearchTerm: props.keepSearchTerm, - groupedObject: [], - }; - // @ts-ignore - this.optionTimeout = null; - // @ts-ignore - this.searchWrapper = React.createRef(); - // @ts-ignore - this.searchBox = React.createRef(); - this.onChange = this.onChange.bind(this); - this.onFocus = this.onFocus.bind(this); - this.onBlur = this.onBlur.bind(this); - this.renderMultiselectContainer = this.renderMultiselectContainer.bind(this); - this.renderSelectedList = this.renderSelectedList.bind(this); - this.onRemoveSelectedItem = this.onRemoveSelectedItem.bind(this); - this.toggelOptionList = this.toggelOptionList.bind(this); - this.onArrowKeyNavigation = this.onArrowKeyNavigation.bind(this); - this.onSelectItem = this.onSelectItem.bind(this); - this.filterOptionsByInput = this.filterOptionsByInput.bind(this); - this.removeSelectedValuesFromOptions = this.removeSelectedValuesFromOptions.bind(this); - this.isSelectedValue = this.isSelectedValue.bind(this); - this.isDisablePreSelectedValues = this.isDisablePreSelectedValues.bind(this); - this.renderNormalOption = this.renderNormalOption.bind(this); - this.listenerCallback = this.listenerCallback.bind(this); - this.resetSelectedValues = this.resetSelectedValues.bind(this); - this.getSelectedItems = this.getSelectedItems.bind(this); - this.getSelectedItemsCount = this.getSelectedItemsCount.bind(this); - this.hideOnClickOutside = this.hideOnClickOutside.bind(this); - this.onCloseOptionList = this.onCloseOptionList.bind(this); - this.isVisible = this.isVisible.bind(this); - } - - /** - * - */ - initialSetValue() { - this.removeSelectedValuesFromOptions(false); - } - - /** - * - */ - resetSelectedValues() { - const { unfilteredOptions } = this.state; - return new Promise((resolve) => { - this.setState({ - selectedValues: [], - preSelectedValues: [], - options: unfilteredOptions, - filteredOptions: unfilteredOptions, - }, () => { - // @ts-ignore - resolve(); - this.initialSetValue(); - }); - }); - } - - /** - * - */ - getSelectedItems() { - return this.state.selectedValues; - } - - /** - * - */ - getSelectedItemsCount() { - return this.state.selectedValues.length; - } - - /** - * - */ - componentDidMount() { - this.initialSetValue(); - // @ts-ignore - this.searchWrapper.current.addEventListener('click', this.listenerCallback); - } - - /** - * - */ - componentDidUpdate(prevProps: IMultiselectProps) { - const { options, selectedValues } = this.props; - const { options: prevOptions, selectedValues: prevSelectedvalues } = prevProps; - if (JSON.stringify(prevOptions) !== JSON.stringify(options)) { - this.setState({ options, filteredOptions: options, unfilteredOptions: options }, this.initialSetValue); - } - if (JSON.stringify(prevSelectedvalues) !== JSON.stringify(selectedValues)) { - this.setState({ selectedValues: Object.assign([], selectedValues), preSelectedValues: Object.assign([], selectedValues) }, this.initialSetValue); - } - } - - /** - * - */ - listenerCallback() { - // @ts-ignore - this.searchBox.current.focus(); - } - - /** - * - */ - componentWillUnmount() { - // @ts-ignore - if (this.optionTimeout) { - // @ts-ignore - clearTimeout(this.optionTimeout); - } - // @ts-ignore - this.searchWrapper.current.removeEventListener('click', this.listenerCallback); - } - - // Skipcheck flag - value will be true when the func called from on deselect anything. - /** - * - */ - removeSelectedValuesFromOptions(skipCheck: boolean) { - const { displayValue } = this.props; - const { selectedValues = [], unfilteredOptions } = this.state; - if (!selectedValues.length && !skipCheck) { - return; - } - const optionList = unfilteredOptions.filter(item => { - return selectedValues.findIndex( - v => v[displayValue] === item[displayValue], - ) === -1 - ? true - : false; - }); - this.setState( - { options: optionList, filteredOptions: optionList }, - this.filterOptionsByInput, - ); - return; - } - - /** - * - */ - onChange(event) { - const { onSearch } = this.props; - this.setState( - { inputValue: event.target.value }, - this.filterOptionsByInput, - ); - if (onSearch) { - onSearch(event.target.value); - } - } - - /** - * - */ - filterOptionsByInput() { - let { options, filteredOptions, inputValue } = this.state; - const { displayValue } = this.props; - options = filteredOptions.filter(i => this.matchValues(i[displayValue], inputValue)); - this.setState({ options }); - } - - /** - * - */ - matchValues(value, search) { - if (value.toLowerCase) { - return value.toLowerCase().indexOf(search.toLowerCase()) > -1; - } - return value.toString().indexOf(search) > -1; - } - - /** - * - */ - onArrowKeyNavigation(e) { - const { - options, - highlightOption, - toggleOptionsList, - inputValue, - selectedValues, - } = this.state; - if (e.keyCode === 8 && !inputValue && selectedValues.length) { - this.onRemoveSelectedItem(selectedValues.length - 1); - } - if (!options.length) { - return; - } - if (e.keyCode === 38) { - if (highlightOption > 0) { - this.setState(previousState => ({ - highlightOption: previousState.highlightOption - 1, - })); - } else { - this.setState({ highlightOption: options.length - 1 }); - } - } else if (e.keyCode === 40) { - if (highlightOption < options.length - 1) { - this.setState(previousState => ({ - highlightOption: previousState.highlightOption + 1, - })); - } else { - this.setState({ highlightOption: 0 }); - } - } else if (e.key === 'Enter' && options.length && toggleOptionsList) { - if (highlightOption === -1) { - return; - } - this.onSelectItem(options[highlightOption]); - } - // TODO: Instead of scrollIntoView need to find better soln for scroll the dropwdown container. - // setTimeout(() => { - // const element = document.querySelector("ul.optionContainer .highlight"); - // if (element) { - // element.scrollIntoView(); - // } - // }); - } - - /** - * - */ - onRemoveSelectedItem(item) { - let { selectedValues, index = 0 } = this.state; - const { onRemove, displayValue } = this.props; - index = selectedValues.findIndex( - i => i[displayValue] === item[displayValue], - ); - selectedValues.splice(index, 1); - onRemove(selectedValues, item); - this.setState({ selectedValues }, () => { - this.removeSelectedValuesFromOptions(true); - }); - } - - /** - * - */ - onSelectItem(item) { - const { selectedValues } = this.state; - const { onSelect } = this.props; - this.setState({ - inputValue: '', - }); - if (this.isSelectedValue(item)) { - this.onRemoveSelectedItem(item); - return; - } - selectedValues.push(item); - onSelect(selectedValues, item); - this.setState({ selectedValues }, () => { - this.removeSelectedValuesFromOptions(true); - }); - } - - /** - * - */ - isSelectedValue(item) { - const { displayValue } = this.props; - const { selectedValues } = this.state; - return ( - selectedValues.filter(i => i[displayValue] === item[displayValue]) - .length > 0 - ); - } - - /** - * - */ - renderOptionList() { - const { emptyRecordMsg } = this.props; - const { options } = this.state; - return ( -
    - {options.length === 0 && {emptyRecordMsg}} - {this.renderNormalOption()} -
- ); - } - - /** - * - */ - renderNormalOption() { - const { displayValue } = this.props; - const { highlightOption } = this.state; - return this.state.options.map((option, i) => { - const isSelected = this.isSelectedValue(option); - return ( -
  • this.onSelectItem(option)} - > - {option[displayValue]} -
    • - ); - }); - } - - /** - * - */ - renderSelectedList() { - const { displayValue } = this.props; - const { selectedValues } = this.state; - return selectedValues.map((value, index) => ( - - {value[displayValue]} - {!this.isDisablePreSelectedValues(value) && ( -
    this.onRemoveSelectedItem(value)} - > - -
    - )} -     - )); - } - - /** - * - */ - isDisablePreSelectedValues(value) { - const { displayValue } = this.props; - const { preSelectedValues } = this.state; - if (!preSelectedValues.length) { - return false; - } - return ( - preSelectedValues.filter(i => i[displayValue] === value[displayValue]) - .length > 0 - ); - } - - /** - * - */ - toggelOptionList() { - this.setState({ - toggleOptionsList: !this.state.toggleOptionsList, - highlightOption: 0, - }); - } - - /** - * - */ - onCloseOptionList() { - this.setState({ - toggleOptionsList: false, - highlightOption: 0, - inputValue: '', - }); - } - - /** - * - */ - onFocus(){ - if (this.state.toggleOptionsList) { - // @ts-ignore - clearTimeout(this.optionTimeout); - } else { - this.toggelOptionList(); - } - } - - /** - * - */ - onBlur(){ - this.setState({ inputValue: '' }, this.filterOptionsByInput); - // @ts-ignore - this.optionTimeout = setTimeout(this.onCloseOptionList, 250); - } - - /** - * - */ - isVisible(elem) { - return !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length); - } - - /** - * - */ - hideOnClickOutside() { - const element = document.getElementsByClassName('multiselect-container')[0]; - const outsideClickListener = event => { - if (element && !element.contains(event.target) && this.isVisible(element)) { - this.toggelOptionList(); - } - }; - document.addEventListener('click', outsideClickListener); - } - - /** - * - */ - renderMultiselectContainer() { - const { inputValue, toggleOptionsList, selectedValues } = this.state; - const { placeholder, id, name, disable, className } = this.props; - return ( -
    -
    - {this.renderSelectedList()} - -
    -
    { - e.preventDefault(); - }} - > - {this.renderOptionList()} -
    -
    - ); - } - - /** - * - */ - render() { - return ( - - {this.renderMultiselectContainer()} - - ); - } - -} - -Multiselect.defaultProps = { - options: [], - selectedValues: [], - displayValue: 'model', - placeholder: 'Select', - emptyRecordMsg: 'No Options Available', - onSelect: () => {}, - onRemove: () => {}, - id: '', - name: '', - className: '', -} as IMultiselectProps; diff --git a/packages/pl-fe/src/features/account/components/header.tsx b/packages/pl-fe/src/features/account/components/header.tsx index 0113b71b4..8409f289e 100644 --- a/packages/pl-fe/src/features/account/components/header.tsx +++ b/packages/pl-fe/src/features/account/components/header.tsx @@ -340,7 +340,7 @@ const Header: React.FC = ({ account }) => { if (features.rssFeeds && account.local && (software !== GOTOSOCIAL || account.enable_rss)) { menu.push({ text: intl.formatMessage(messages.subscribeFeed), - icon: require('@tabler/icons/outline/rss.svg'), + icon: require('@phosphor-icons/core/regular/rss.svg'), href: software === MASTODON ? `${account.url}.rss` : `${account.url}/feed.rss`, target: '_blank', }); @@ -350,7 +350,7 @@ const Header: React.FC = ({ account }) => { menu.push({ text: intl.formatMessage(messages.share, { name: account.username }), action: handleShare, - icon: require('@tabler/icons/outline/upload.svg'), + icon: require('@phosphor-icons/core/regular/export.svg'), }); } @@ -388,18 +388,18 @@ const Header: React.FC = ({ account }) => { menu.push({ text: intl.formatMessage(messages.edit_profile), to: '/settings/profile', - icon: require('@tabler/icons/outline/user.svg'), + icon: require('@phosphor-icons/core/regular/user.svg'), }); menu.push({ text: intl.formatMessage(messages.preferences), to: '/settings', - icon: require('@tabler/icons/outline/settings.svg'), + icon: require('@phosphor-icons/core/regular/sliders-horizontal.svg'), }); menu.push(null); menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes', - icon: require('@tabler/icons/outline/circle-x.svg'), + icon: require('@phosphor-icons/core/regular/speaker-simple-x.svg'), }); menu.push({ text: intl.formatMessage(messages.blocks), @@ -440,7 +440,7 @@ const Header: React.FC = ({ account }) => { menu.push({ text: intl.formatMessage(messages.add_or_remove_from_list), action: onAddToList, - icon: require('@tabler/icons/outline/list.svg'), + icon: require('@phosphor-icons/core/regular/list-bullets.svg'), }); } @@ -448,14 +448,14 @@ const Header: React.FC = ({ account }) => { menu.push({ text: intl.formatMessage(account.relationship?.endorsed ? messages.unendorse : messages.endorse), action: onEndorseToggle, - icon: require('@tabler/icons/outline/user-check.svg'), + icon: account.relationship?.endorsed ? require('@phosphor-icons/core/regular/user-minus.svg') : require('@phosphor-icons/core/regular/user-check.svg'), }); } } else if (features.lists && features.unrestrictedLists) { menu.push({ text: intl.formatMessage(messages.add_or_remove_from_list), action: onAddToList, - icon: require('@tabler/icons/outline/list.svg'), + icon: require('@phosphor-icons/core/regular/list-bullets.svg'), }); } @@ -481,7 +481,7 @@ const Header: React.FC = ({ account }) => { menu.push({ text: intl.formatMessage(messages.removeFromFollowers), action: onRemoveFromFollowers, - icon: require('@tabler/icons/outline/user-x.svg'), + icon: require('@phosphor-icons/core/regular/user-minus.svg'), }); } @@ -489,13 +489,13 @@ const Header: React.FC = ({ account }) => { menu.push({ text: intl.formatMessage(messages.unmute, { name: account.username }), action: onMute, - icon: require('@tabler/icons/outline/circle-x.svg'), + icon: require('@phosphor-icons/core/regular/speaker-simple-x.svg'), }); } else { menu.push({ text: intl.formatMessage(messages.mute, { name: account.username }), action: onMute, - icon: require('@tabler/icons/outline/circle-x.svg'), + icon: require('@phosphor-icons/core/regular/speaker-simple-x.svg'), }); } @@ -673,7 +673,7 @@ const Header: React.FC = ({ account }) => { return ( = ({ account }) => { return ( = ({ account }) => { {menu.length > 0 && ( = ({ chat, onClick }) => {
    { data-testid='chat-message-menu' > diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx index 027d0b3f6..3105f4516 100644 --- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx @@ -39,7 +39,7 @@ const ChatPageSidebar = () => { diff --git a/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx b/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx index 97b3d872e..1675828d6 100644 --- a/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx +++ b/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx @@ -56,7 +56,7 @@ const messages = defineMessages({ }); const blockTypeToIcon = { - bullet: require('@tabler/icons/outline/list.svg'), + bullet: require('@phosphor-icons/core/regular/list-bullets.svg'), check: require('@tabler/icons/outline/list-check.svg'), code: require('@tabler/icons/outline/code.svg'), h1: require('@tabler/icons/outline/h-1.svg'), diff --git a/packages/pl-fe/src/features/event/components/event-header.tsx b/packages/pl-fe/src/features/event/components/event-header.tsx index 74412c884..49af6ee9c 100644 --- a/packages/pl-fe/src/features/event/components/event-header.tsx +++ b/packages/pl-fe/src/features/event/components/event-header.tsx @@ -335,7 +335,7 @@ const EventHeader: React.FC = ({ status }) => { menu.push({ text: intl.formatMessage(messages.mute, { name: username }), action: handleMuteClick, - icon: require('@tabler/icons/outline/circle-x.svg'), + icon: require('@phosphor-icons/core/regular/speaker-simple-x.svg'), }); menu.push({ text: intl.formatMessage(messages.block, { name: username }), @@ -419,7 +419,7 @@ const EventHeader: React.FC = ({ status }) => { { return ( = { private: require('@phosphor-icons/core/regular/lock.svg'), mutuals_only: require('@tabler/icons/outline/users-group.svg'), local: require('@tabler/icons/outline/affiliate.svg'), - list: require('@tabler/icons/outline/list.svg'), + list: require('@phosphor-icons/core/regular/list-bullets.svg'), subscribers: require('@tabler/icons/outline/coin.svg'), }; diff --git a/packages/pl-fe/src/modals/list-adder-modal/components/list.tsx b/packages/pl-fe/src/modals/list-adder-modal/components/list.tsx index 1d54fb8c8..eeb9d614e 100644 --- a/packages/pl-fe/src/modals/list-adder-modal/components/list.tsx +++ b/packages/pl-fe/src/modals/list-adder-modal/components/list.tsx @@ -39,7 +39,7 @@ const List: React.FC = ({ listId, accountId, added }) => { return (
    - + {list.title} diff --git a/packages/pl-fe/src/pages/account-lists/circles.tsx b/packages/pl-fe/src/pages/account-lists/circles.tsx index 778936298..5ac9fb8ec 100644 --- a/packages/pl-fe/src/pages/account-lists/circles.tsx +++ b/packages/pl-fe/src/pages/account-lists/circles.tsx @@ -100,7 +100,7 @@ const CirclesPage: React.FC = () => { to={`/circles/${circle.id}`} label={ - + {circle.title} } diff --git a/packages/pl-fe/src/pages/account-lists/lists.tsx b/packages/pl-fe/src/pages/account-lists/lists.tsx index ed5462a5b..6c4915fa7 100644 --- a/packages/pl-fe/src/pages/account-lists/lists.tsx +++ b/packages/pl-fe/src/pages/account-lists/lists.tsx @@ -109,7 +109,7 @@ const ListsPage: React.FC = () => { to={`/list/${list.id}`} label={ - + {list.title} } diff --git a/packages/pl-fe/src/pages/dashboard/theme-editor.tsx b/packages/pl-fe/src/pages/dashboard/theme-editor.tsx index 1e3335d09..49946a882 100644 --- a/packages/pl-fe/src/pages/dashboard/theme-editor.tsx +++ b/packages/pl-fe/src/pages/dashboard/theme-editor.tsx @@ -225,7 +225,7 @@ const ThemeEditorPage: React.FC = () => { }, { text: intl.formatMessage(messages.import), action: importTheme, - icon: require('@tabler/icons/outline/upload.svg'), + icon: require('@phosphor-icons/core/regular/export.svg'), }, { text: intl.formatMessage(messages.export), action: exportTheme, diff --git a/packages/pl-fe/src/pages/statuses/status.tsx b/packages/pl-fe/src/pages/statuses/status.tsx index 919252bfe..db1e4640f 100644 --- a/packages/pl-fe/src/pages/statuses/status.tsx +++ b/packages/pl-fe/src/pages/statuses/status.tsx @@ -91,7 +91,7 @@ const StatusPage: React.FC = (props) => { { text: intl.formatMessage(messages.linearView), action: () => dispatch(changeSetting(['threads', 'displayMode'], 'linear')), - icon: require('@tabler/icons/outline/list.svg'), + icon: require('@phosphor-icons/core/regular/list-bullets.svg'), type: 'radio', checked: displayMode === 'linear', },