parent
0c16ffeb02
commit
7675860429
@ -1,129 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import { withRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
// import classNames from 'clsx';
|
|
||||||
// import { injectIntl, defineMessages } from 'react-intl';
|
|
||||||
// import Icon from 'soapbox/components/icon';
|
|
||||||
import SubNavigation from 'soapbox/components/sub-navigation';
|
|
||||||
|
|
||||||
// const messages = defineMessages({
|
|
||||||
// show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
|
|
||||||
// hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
|
|
||||||
// });
|
|
||||||
|
|
||||||
class ColumnHeader extends React.PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
// intl: PropTypes.object.isRequired,
|
|
||||||
title: PropTypes.node,
|
|
||||||
icon: PropTypes.string,
|
|
||||||
active: PropTypes.bool,
|
|
||||||
extraButton: PropTypes.node,
|
|
||||||
children: PropTypes.node,
|
|
||||||
history: PropTypes.object,
|
|
||||||
};
|
|
||||||
|
|
||||||
state = {
|
|
||||||
collapsed: true,
|
|
||||||
animating: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
historyBack = () => {
|
|
||||||
if (window.history?.length === 1) {
|
|
||||||
this.props.history.push('/');
|
|
||||||
} else {
|
|
||||||
this.props.history.goBack();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleToggleClick = (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
this.setState({ collapsed: !this.state.collapsed, animating: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
handleBackClick = () => {
|
|
||||||
this.historyBack();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleTransitionEnd = () => {
|
|
||||||
this.setState({ animating: false });
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { title } = this.props;
|
|
||||||
|
|
||||||
return <SubNavigation message={title} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
// render() {
|
|
||||||
// const { title, icon, active, children, extraButton, intl: { formatMessage } } = this.props;
|
|
||||||
// const { collapsed, animating } = this.state;
|
|
||||||
//
|
|
||||||
// const wrapperClassName = classNames('column-header__wrapper', {
|
|
||||||
// 'active': active,
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// const buttonClassName = classNames('column-header', {
|
|
||||||
// 'active': active,
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// const collapsibleClassName = classNames('column-header__collapsible', {
|
|
||||||
// 'collapsed': collapsed,
|
|
||||||
// 'animating': animating,
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// const collapsibleButtonClassName = classNames('column-header__button', {
|
|
||||||
// 'active': !collapsed,
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// let extraContent, collapseButton;
|
|
||||||
//
|
|
||||||
// if (children) {
|
|
||||||
// extraContent = (
|
|
||||||
// <div key='extra-content' className='column-header__collapsible__extra'>
|
|
||||||
// {children}
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// const collapsedContent = [
|
|
||||||
// extraContent,
|
|
||||||
// ];
|
|
||||||
//
|
|
||||||
// if (children) {
|
|
||||||
// collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><Icon id='cog' /></button>;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// const hasTitle = icon && title;
|
|
||||||
//
|
|
||||||
// return (
|
|
||||||
// <div className={wrapperClassName}>
|
|
||||||
// <h1 className={buttonClassName}>
|
|
||||||
// {hasTitle && (
|
|
||||||
// <button>
|
|
||||||
// <Icon id={icon} fixedWidth className='column-header__icon' />
|
|
||||||
// {title}
|
|
||||||
// </button>
|
|
||||||
// )}
|
|
||||||
//
|
|
||||||
// <div className='column-header__buttons'>
|
|
||||||
// {extraButton}
|
|
||||||
// {collapseButton}
|
|
||||||
// </div>
|
|
||||||
// </h1>
|
|
||||||
//
|
|
||||||
// <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}>
|
|
||||||
// <div className='column-header__collapsible-inner'>
|
|
||||||
// {(!collapsed || animating) && collapsedContent}
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withRouter(ColumnHeader);
|
|
@ -1,41 +0,0 @@
|
|||||||
// import throttle from 'lodash/throttle';
|
|
||||||
import React from 'react';
|
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
|
||||||
// import { connect } from 'react-redux';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
|
|
||||||
import { CardHeader, CardTitle } from './ui';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
back: { id: 'column_back_button.label', defaultMessage: 'Back' },
|
|
||||||
});
|
|
||||||
|
|
||||||
interface ISubNavigation {
|
|
||||||
message: React.ReactNode,
|
|
||||||
/** @deprecated Unused. */
|
|
||||||
settings?: React.ComponentType,
|
|
||||||
}
|
|
||||||
|
|
||||||
const SubNavigation: React.FC<ISubNavigation> = ({ message }) => {
|
|
||||||
const intl = useIntl();
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
const handleBackClick = () => {
|
|
||||||
if (window.history && window.history.length === 1) {
|
|
||||||
history.push('/');
|
|
||||||
} else {
|
|
||||||
history.goBack();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CardHeader
|
|
||||||
aria-label={intl.formatMessage(messages.back)}
|
|
||||||
onBackClick={handleBackClick}
|
|
||||||
>
|
|
||||||
<CardTitle title={message} />
|
|
||||||
</CardHeader>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SubNavigation;
|
|
@ -1,39 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import { Column } from 'soapbox/components/ui';
|
|
||||||
import DropdownMenu from 'soapbox/containers/dropdown-menu-container';
|
|
||||||
|
|
||||||
import ColumnHeader from './column-header';
|
|
||||||
|
|
||||||
// Yes, there are 3 types of columns at this point, but this one is better, I swear
|
|
||||||
export default class BetterColumn extends React.PureComponent {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
heading: PropTypes.string,
|
|
||||||
icon: PropTypes.string,
|
|
||||||
children: PropTypes.node,
|
|
||||||
active: PropTypes.bool,
|
|
||||||
menu: PropTypes.array,
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { heading, icon, children, active, menu, ...rest } = this.props;
|
|
||||||
const columnHeaderId = heading && heading.replace(/ /g, '-');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Column aria-labelledby={columnHeaderId} className='column--better' {...rest}>
|
|
||||||
<div className='column__top'>
|
|
||||||
{heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />}
|
|
||||||
{menu && (
|
|
||||||
<div className='column__menu'>
|
|
||||||
<DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{children}
|
|
||||||
</Column>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
@ -1,47 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
// import classNames from 'clsx';
|
|
||||||
// import Icon from 'soapbox/components/icon';
|
|
||||||
import SubNavigation from 'soapbox/components/sub-navigation';
|
|
||||||
|
|
||||||
interface IColumnHeader {
|
|
||||||
icon?: string,
|
|
||||||
type: string
|
|
||||||
active?: boolean,
|
|
||||||
columnHeaderId?: string,
|
|
||||||
}
|
|
||||||
|
|
||||||
const ColumnHeader: React.FC<IColumnHeader> = ({ type }) => {
|
|
||||||
return <SubNavigation message={type} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ColumnHeader;
|
|
||||||
|
|
||||||
// export default class ColumnHeader extends React.PureComponent {
|
|
||||||
|
|
||||||
// static propTypes = {
|
|
||||||
// icon: PropTypes.string,
|
|
||||||
// type: PropTypes.string,
|
|
||||||
// active: PropTypes.bool,
|
|
||||||
// onClick: PropTypes.func,
|
|
||||||
// columnHeaderId: PropTypes.string,
|
|
||||||
// };
|
|
||||||
|
|
||||||
// handleClick = () => {
|
|
||||||
// this.props.onClick();
|
|
||||||
// }
|
|
||||||
|
|
||||||
// render() {
|
|
||||||
// const { icon, type, active, columnHeaderId } = this.props;
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <h1 className={classNames('column-header', { active })} id={columnHeaderId || null}>
|
|
||||||
// <button onClick={this.handleClick}>
|
|
||||||
// {icon && <Icon id={icon} fixedWidth className='column-header__icon' />}
|
|
||||||
// {type}
|
|
||||||
// </button>
|
|
||||||
// </h1>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
// }
|
|
@ -1,36 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
import Pullable from 'soapbox/components/pullable';
|
|
||||||
import { Column } from 'soapbox/components/ui';
|
|
||||||
|
|
||||||
import ColumnHeader from './column-header';
|
|
||||||
|
|
||||||
import type { IColumn } from 'soapbox/components/ui/column/column';
|
|
||||||
|
|
||||||
interface IUIColumn extends IColumn {
|
|
||||||
heading?: string,
|
|
||||||
icon?: string,
|
|
||||||
active?: boolean,
|
|
||||||
}
|
|
||||||
|
|
||||||
const UIColumn: React.FC<IUIColumn> = ({
|
|
||||||
heading,
|
|
||||||
icon,
|
|
||||||
children,
|
|
||||||
active,
|
|
||||||
...rest
|
|
||||||
}) => {
|
|
||||||
const columnHeaderId = heading && heading.replace(/ /g, '-');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Column aria-labelledby={columnHeaderId} {...rest}>
|
|
||||||
{heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />}
|
|
||||||
<Pullable>
|
|
||||||
{children}
|
|
||||||
</Pullable>
|
|
||||||
</Column>
|
|
||||||
);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
export default UIColumn;
|
|
Loading…
Reference in new issue