@instructure/canvas-rce
Version:
A component wrapping Canvas's usage of Tinymce
94 lines (93 loc) • 3.58 kB
JavaScript
/*
* Copyright (C) 2022 - present Instructure, Inc.
*
* This file is part of Canvas.
*
* Canvas is free software: you can redistribute it and/or modify it under
* the terms of the GNU Affero General Public License as published by the Free
* Software Foundation, version 3 of the License.
*
* Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
* A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
* details.
*
* You should have received a copy of the GNU Affero General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useEffect } from 'react';
import { View } from '@instructure/ui-view';
import { Text } from '@instructure/ui-text';
import { Flex } from '@instructure/ui-flex';
import { TextInput } from '@instructure/ui-text-input';
import formatMessage from '../../../format-message';
import { showFlashAlert } from '../../../common/FlashAlert';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { getIcon, getFriendlyLinkType } from './linkUtils';
const getEditMessage = () => formatMessage('If left empty, link text will display as course link name');
export const LinkDisplay = ({
linkText,
placeholderText,
linkFileName,
published,
handleTextChange,
linkType
}) => {
useEffect(() => {
showFlashAlert({
message: formatMessage('Selected {linkFileName}', {
linkFileName
}),
type: 'info',
srOnly: true
});
}, [linkFileName]);
const Icon = getIcon(linkType);
const linkTypeMessage = getFriendlyLinkType(linkType);
const publishedMessage = published ? formatMessage('published') : formatMessage('unpublished');
return /*#__PURE__*/React.createElement(View, {
as: "div",
"data-testid": "LinkDisplay"
}, /*#__PURE__*/React.createElement(View, {
as: "div"
}, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(TextInput, {
"data-testid": "link-text-input",
renderLabel: () => formatMessage('Text (optional)'),
onChange: (_e, value) => handleTextChange(value),
value: linkText,
placeholder: placeholderText,
messages: [{
type: 'hint',
text: getEditMessage()
}]
})))), /*#__PURE__*/React.createElement(View, {
as: "div",
margin: "medium none medium none"
}, /*#__PURE__*/React.createElement(Flex, {
margin: "small none small none"
}, /*#__PURE__*/React.createElement(Text, {
weight: "bold"
}, formatMessage('Current Link'))), /*#__PURE__*/React.createElement(Flex, {
margin: "small none none none"
}, /*#__PURE__*/React.createElement(Flex.Item, {
padding: "0 x-small 0 small"
}, /*#__PURE__*/React.createElement(Text, {
"data-testid": "icon-wrapper",
color: published ? 'success' : 'primary'
}, /*#__PURE__*/React.createElement(Icon, {
size: "x-small"
}))), /*#__PURE__*/React.createElement(Flex.Item, {
padding: "0 x-small 0 0",
shouldGrow: true,
shouldShrink: true,
textAlign: "start"
}, /*#__PURE__*/React.createElement(View, {
as: "div"
}, /*#__PURE__*/React.createElement("span", {
"data-testid": "selected-link-name"
}, linkFileName), linkType && /*#__PURE__*/React.createElement(ScreenReaderContent, {
"data-testid": "screenreader_content"
}, formatMessage('link type: {linkTypeMessage}', {
linkTypeMessage
}), linkType !== 'navigation' && publishedMessage))))));
};