Skip to content

Commit

Permalink
Merge pull request #984 from mbusch3/main
Browse files Browse the repository at this point in the history 
React Update: 16 -> 18.3.1
  • Loading branch information
@dmols
dmols authored Feb 5, 2025
2 parents 3564afa + 8249de2 commit 5951e84
Show file tree
Hide file tree
Showing 22 changed files with 2,273 additions and 2,205 deletions.
62 changes: 27 additions & 35 deletions assets/js/Components/AboutModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,30 @@ import { CloseButton } from '@instructure/ui-buttons'
import AboutPage from './AboutPage'


class AboutModal extends React.Component {
constructor(props) {
super(props)
}

render() {
return (
<Modal
open={true}
size="large"
label={this.props.t('label.about')}>
<Modal.Header padding="0 medium">
<Flex>
<Flex.Item shouldGrow shouldShrink>
<Heading>{this.props.t('label.about')}</Heading>
</Flex.Item>
<Flex.Item>
<CloseButton
placement="end"
offset="small"
screenReaderLabel={this.props.t('srlabel.close')}
onClick={() => this.props.handleModal(null)}
/>
</Flex.Item>
</Flex>
</Modal.Header>
<Modal.Body padding="small medium">
<AboutPage t={this.props.t} settings={this.props.settings} />
</Modal.Body>
</Modal>
)
}
}

export default AboutModal
export default function AboutModal({ t, settings, handleModal }) {
return (
<Modal
open={true}
size="large"
label={t('label.about')}>
<Modal.Header padding="0 medium">
<Flex>
<Flex.Item shouldGrow shouldShrink>
<Heading>{t('label.about')}</Heading>
</Flex.Item>
<Flex.Item>
<CloseButton
placement="end"
offset="small"
screenReaderLabel={t('srlabel.close')}
onClick={() => handleModal(null)}
/>
</Flex.Item>
</Flex>
</Modal.Header>
<Modal.Body padding="small medium">
<AboutPage t={t} settings={settings} />
</Modal.Body>
</Modal>
)
}
208 changes: 101 additions & 107 deletions assets/js/Components/AboutPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { useState, useEffect } from 'react'
import { Heading } from '@instructure/ui-heading'
import { View } from '@instructure/ui-view'
import { Text } from '@instructure/ui-text'
Expand All @@ -10,133 +10,127 @@ import * as Html from '../Services/Html'
import ReactHtmlParser from 'react-html-parser'
import Classes from '../../css/theme-overrides.css'

class AboutPage extends React.Component {
export default function AboutPage({ t, settings }) {
const [expandDetails, setExpandDetails] = useState(false)
const [issues, setIssues] = useState({"error": [], "suggestion": []})

constructor(props) {
super(props)

this.state = {
expandDetails: false
}

this.handleDetailsToggle = this.handleDetailsToggle.bind(this)
const handleDetailsToggle = () => {
setExpandDetails(!expandDetails)
}

handleDetailsToggle() {
this.setState({ expandDetails: !this.state.expandDetails })
}
useEffect(() => {
const suggestionTypes = (settings.suggestionRuleIds != null) ? settings.suggestionRuleIds : ''

render() {
const suggestionTypes = (this.props.settings.suggestionRuleIds != null) ? this.props.settings.suggestionRuleIds : ''
this.issues = {
let currentIssues = {
"error": [],
"suggestion": []
}

issueRuleIds.forEach(issue => {
if (suggestionTypes.includes(issue)) {
this.issues.suggestion.push(issue)
currentIssues.suggestion.push(issue)
} else {
this.issues.error.push(issue)
currentIssues.error.push(issue)
}
})

return (
<View as="div">
<Flex>
<Flex.Item shouldShrink shouldGrow align="start">
setIssues(currentIssues)
}, [])

return (
<View as="div">
<Flex>
<Flex.Item shouldShrink shouldGrow align="start">
<View as="div">
<Text as="p" lineHeight="default">
{ReactHtmlParser(t('about.description'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
</Text>
</View>
<View as="div" margin="large 0">
<Text as="strong">{t('about.disclaimer_title')}</Text>
<Text as="p" weight="normal" lineHeight="default">
{ReactHtmlParser(t('about.disclaimer'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
</Text>
</View>
</Flex.Item>
<Flex.Item size="400px" align="start" padding="small 0 0 large">
<View as="div">
{ReactHtmlParser(t('about.video_embed'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
</View>
<View as="div" textAlign="center">
{ReactHtmlParser(t('about.video_link'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
</View>

<View as="div" margin="large 0">
<View as="div">
<Text as="p" lineHeight="default">
{ReactHtmlParser(this.props.t('about.description'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
</Text>
<Text as="strong">{t('about.resources')}</Text>
</View>
<View as="div" margin="large 0">
<Text as="strong">{this.props.t('about.disclaimer_title')}</Text>
<Text as="p" weight="normal" lineHeight="default">
{ReactHtmlParser(this.props.t('about.disclaimer'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
</Text>
<View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
<View>
{ReactHtmlParser(t('about.user_guide_link'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
</View>
</View>
</Flex.Item>
<Flex.Item size="400px" align="start" padding="small 0 0 large">
</View>

<View as="div" margin="large 0">
<View as="div">
{ReactHtmlParser(this.props.t('about.video_embed'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
<Text as="strong">{t('about.policies')}</Text>
</View>
<View as="div" textAlign="center">
{ReactHtmlParser(this.props.t('about.video_link'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
<View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
{ReactHtmlParser(t('about.youtube_terms'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
</View>
<View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
{ReactHtmlParser(t('about.google_privacy'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
</View>
</View>
</Flex.Item>
</Flex>
<View as="div" margin="medium 0" display="inline-block" width="100vw">
<ToggleDetails
summary={t('label.btn.udoit_details')}
expanded={expandDetails}
fluidWidth={true}
onToggle={handleDetailsToggle}>

<View as="div" margin="large 0">
<View as="div">
<Text as="strong">{this.props.t('about.resources')}</Text>
</View>
<View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
<View>
{ReactHtmlParser(this.props.t('about.user_guide_link'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
{Object.keys(issues).map((issueType) => {
const type = issues[issueType]
return (
<View as="div" margin="small large" key={issueType}>
<View padding="x-small" margin="none">
<Heading level="h3">
{('error' === issueType) ? <IconNoLine className={Classes.error} /> : <IconInfoBorderlessLine className={Classes.suggestion} />}&nbsp;
{t(`label.plural.${issueType}`)}
</Heading><br />
</View>
{type.map((rule) => {
let showExample = false
if (!t(`rule.example.${rule}`).includes('rule.example')) {
showExample = true
}
return (
<ToggleDetails key={rule} summary={
<Heading level="h4">
{t(`rule.label.${rule}`)}
</Heading>}
>
<View as="div" margin="small 0" background="primary" padding="small" shadow="above">
{ReactHtmlParser(t(`rule.desc.${rule}`), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
{
(showExample) &&
<View as="div">{ReactHtmlParser(t(`rule.example.${rule}`), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}</View>
}
</View>
</ToggleDetails>
)
})}
</View>
</View>

<View as="div" margin="large 0">
<View as="div">
<Text as="strong">{this.props.t('about.policies')}</Text>
</View>
<View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
{ReactHtmlParser(this.props.t('about.youtube_terms'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
</View>
<View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
{ReactHtmlParser(this.props.t('about.google_privacy'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
</View>
</View>
</Flex.Item>
</Flex>
<View as="div" margin="medium 0" display="inline-block" width="100vw">
<ToggleDetails
summary={this.props.t('label.btn.udoit_details')}
expanded={this.state.expandDetails}
fluidWidth={true}
onToggle={this.handleDetailsToggle}>

{Object.keys(this.issues).map((issueType) => {
const type = this.issues[issueType]
return (
<View as="div" margin="small large" key={issueType}>
<View padding="x-small" margin="none">
<Heading level="h3">
{('error' === issueType) ? <IconNoLine className={Classes.error} /> : <IconInfoBorderlessLine className={Classes.suggestion} />}&nbsp;
{this.props.t(`label.plural.${issueType}`)}
</Heading><br />
</View>
{type.map((rule) => {
if (!this.props.t(`rule.example.${rule}`).includes('rule.example')) {
var showExample = true
}
return (
<ToggleDetails key={rule} summary={
<Heading level="h4">
{this.props.t(`rule.label.${rule}`)}
</Heading>}
>
<View as="div" margin="small 0" background="primary" padding="small" shadow="above">
{ReactHtmlParser(this.props.t(`rule.desc.${rule}`), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
{
(showExample) &&
<View as="div">{ReactHtmlParser(this.props.t(`rule.example.${rule}`), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}</View>
}
</View>
</ToggleDetails>
)
})}
</View>
)
})}
</ToggleDetails>
</View>
<View as="div" textAlign="end">
<Text weight="light">{this.props.t('label.version')} {this.props.settings.versionNumber}</Text>
</View>
)
})}
</ToggleDetails>
</View>
)
}
}

export default AboutPage
<View as="div" textAlign="end">
<Text weight="light">{t('label.version')} {settings.versionNumber}</Text>
</View>
</View>
)
}
Loading

0 comments on commit 5951e84

Please sign in to comment.