Skip to content

Commit

Permalink
Merge pull request #407 from mlibrary/LIBSEARCH-905-when-text-service…
Browse files Browse the repository at this point in the history 
…-is-restored-undo-ui-changes-in-select-act

[LIBSEARCH-905] When text service is restored, undo UI changes in select & act
  • Loading branch information
@bertrama
bertrama authored Oct 24, 2023
2 parents d03ea6f + 7807f6b commit 80e5e15
Show file tree
Hide file tree
Showing 10 changed files with 455 additions and 653 deletions.
284 changes: 115 additions & 169 deletions src/modules/lists/components/ActionsList/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useState } from 'react';
import { connect } from 'react-redux';
import EmailAction from '../EmailAction';
import TextAction from '../TextAction';
Expand All @@ -9,187 +9,133 @@ import { AuthenticationRequired } from '../../../profile';
import { ContextProvider, Icon, Alert } from '../../../reusable';
import PropTypes from 'prop-types';

class ActionsList extends Component {
state = {
actions: [
{
uid: 'email',
action: 'email',
name: 'Email',
icon: 'email'
},
{
uid: 'text',
action: 'text',
name: 'Text',
icon: 'chat'
},
{
uid: 'citation',
action: 'citation',
name: 'Citation',
icon: 'format_quote'
},
{
uid: 'endnote',
action: 'file',
name: 'Export Citation (EndNote)',
icon: 'insert_drive_file'
},
{
uid: 'ris',
action: 'file',
name: 'Export Citation (RIS)',
icon: 'insert_drive_file'
},
{
uid: 'permalink',
action: 'permalink',
name: 'Copy link',
icon_d: 'M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'
}
],
alert: null
};

setAlert = ({ intent, text }) => {
this.setState({
alert: { intent, text }
});
};

handleClick = (type, view) => {
const {
active,
setActive
} = this.props;
// Set the active Action to what was just clicked.
// If it is already active, then deselect it making
// no action active.
if (active === type) {
setActive(undefined);
} else {
setActive(type);
function ActionsList (props) {
const [alert, setAlert] = useState(null);
const actions = [
{
uid: 'email',
action: 'email',
name: 'Email',
icon: 'email'
},
{
uid: 'text',
action: 'text',
name: 'Text',
icon: 'chat'
},
{
uid: 'citation',
action: 'citation',
name: 'Citation',
icon: 'format_quote'
},
{
uid: 'endnote',
action: 'file',
name: 'Export Citation (EndNote)',
icon: 'insert_drive_file'
},
{
uid: 'ris',
action: 'file',
name: 'Export Citation (RIS)',
icon: 'insert_drive_file'
},
{
uid: 'permalink',
action: 'permalink',
name: 'Copy link',
icon_d: 'M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'
}
];

// also reset Alert
this.setState({ alert: null });
};

renderActionDetails = () => {
const {
active
} = this.props;

if (!active) {
return null;
}
return (
<ContextProvider render={(data) => {
return (
<div className='y-spacing'>
<ul className='lists-actions-list'>
{actions.map((action) => {
if (action.uid === 'permalink' && data.viewType !== 'Full') {
return null;
}

return (
<ContextProvider render={(data) => {
return (
<>
{active.action === 'email' && (
<AuthenticationRequired>
<EmailAction
action={active}
{...this.props}
/>
</AuthenticationRequired>
)}
{active.action === 'text' && (
<AuthenticationRequired>
<TextAction
action={active}
{...this.props}
/>
</AuthenticationRequired>
)}
{active.action === 'permalink' && (
<PermalinkAction
action={active}
setAlert={this.setAlert}
{...this.props}
/>
)}
const isActive = action.uid === props.active?.uid;
const activeClassName = isActive ? 'lists-action-button--active' : '';

{active.action === 'citation' && (
<CitationAction
{...data}
action={active}
setAlert={this.setAlert}
{...this.props}
return (
<li key={action.uid}>
<button
className={`button-link lists-action-button ${activeClassName}`}
onClick={() => {
// Click to toggle active state
props.setActive(!isActive ? action : undefined);
setAlert(null);
}}
aria-pressed={!!isActive}
>
<span style={{ opacity: '0.75' }}>
<Icon size={20} d={action.icon_d} icon={action.icon} />
</span>{action.name}
</button>
</li>
);
})}
</ul>
{props.active?.action === 'email' && (
<AuthenticationRequired profile={props.profile}>
<EmailAction
action={props.active}
{...props}
/>
)}
{active.action === 'file' && (
<FileAction
action={active}
{...this.props}
</AuthenticationRequired>
)}
{props.active?.action === 'text' && (
<AuthenticationRequired profile={props.profile}>
<TextAction
action={props.active}
{...props}
/>
)}
</>
);
}}
/>
);
};

render () {
const { active } = this.props;
const activeUid = active ? active.uid : null;

return (
<ContextProvider render={(data) => {
return (
<div className='y-spacing'>
<ul className='lists-actions-list'>
{this.state.actions.map((action) => {
if (action.uid === 'permalink' && data.viewType !== 'Full') {
return null;
}

const isActive = action.uid === activeUid;
const activeClassName = isActive ? 'lists-action-button--active' : '';

return (
<li key={action.uid}>
<button
className={`button-link lists-action-button ${activeClassName}`}
onClick={() => {
return this.handleClick(action, data.viewType);
}}
aria-pressed={isActive}
disabled={action.uid === 'text'}
>
<span style={{ opacity: '0.75' }}>
{action.icon_d
? <Icon size={20} d={action.icon_d} />
: <Icon size={20} icon={action.icon} />}
</span>{action.name}
</button>
</li>
);
})}
</ul>
{this.renderActionDetails()}
{this.state.alert && (
<Alert type={this.state.alert.intent}>{this.state.alert.text}</Alert>
)}
{!active && <p className='font-small'>Texting records to your mobile device is temporarily unavailable.</p>}
</div>
);
}}
/>
);
}
</AuthenticationRequired>
)}
{props.active?.action === 'permalink' && (
<PermalinkAction
action={props.active}
setAlert={setAlert}
{...props}
/>
)}
{props.active?.action === 'citation' && (
<CitationAction
{...data}
action={props.active}
setAlert={setAlert}
{...props}
/>
)}
{props.active?.action === 'file' && (
<FileAction
action={props.active}
{...props}
/>
)}
{alert && (
<Alert type={alert.intent}>{alert.text}</Alert>
)}
</div>
);
}}
/>
);
}

ActionsList.propTypes = {
active: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object
]),
setActive: PropTypes.func
setActive: PropTypes.func,
profile: PropTypes.object
};

function mapStateToProps (state) {
Expand Down
Loading

0 comments on commit 80e5e15

Please sign in to comment.