Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

site: update fluxible-addons-react imports #715

Merged
merged 1 commit into from
Jun 21, 2021
Merged

site: update fluxible-addons-react imports #715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions site/components/Debug.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,26 @@
import React from 'react';
import { FluxibleContext } from 'fluxible-addons-react';
import { FluxibleComponentContext } from 'fluxible-addons-react';
import { Actions } from 'fluxible-plugin-devtools';

class Debug extends React.Component {

static contextType = FluxibleContext;
static contextType = FluxibleComponentContext;

constructor() {
super();
this.state = {
shouldRender: false,
relativeWidth: false
relativeWidth: false,
};
}


componentDidMount() {
if (this.context.query.debug) {
this.setState({shouldRender: true});
this.setState({ shouldRender: true });
}
}

handleRelativeWidth(event) {
this.setState({relativeWidth: event.target.checked});
this.setState({ relativeWidth: event.target.checked });
}

render() {
Expand All @@ -43,7 +41,7 @@ class Debug extends React.Component {
position: 'fixed',
top: 0,
width: '80%',
zIndex: 100
zIndex: 100,
};
return (
<div style={styles}>
Expand Down
35 changes: 20 additions & 15 deletions site/components/Search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,25 @@ import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { navigateAction, RouteStore } from 'fluxible-router';
import { connectToStores, FluxibleContext } from 'fluxible-addons-react';
import {
connectToStores,
FluxibleComponentContext,
} from 'fluxible-addons-react';
import loadIndex from '../actions/loadIndex';
import SearchStore from '../stores/SearchStore';
import debugLib from 'debug';
const debug = debugLib('Search');
const ENTER_KEY_CODE = 13;

class Search extends React.Component {

static contextType = FluxibleContext;
static contextType = FluxibleComponentContext;

static propTypes = {
currentRoute: PropTypes.object
currentRoute: PropTypes.object,
};

constructor() {
super();
this.state = {
visible: false
visible: false,
};
}

Expand All @@ -37,7 +37,7 @@ class Search extends React.Component {
const query = this.props.currentRoute.query.q;
if (query) {
this.setState({
visible: true
visible: true,
});
}
}
Expand All @@ -59,7 +59,7 @@ class Search extends React.Component {

_toggleSearchVisibility() {
this.setState({
visible: !this.state.visible
visible: !this.state.visible,
});
}

Expand All @@ -74,7 +74,7 @@ class Search extends React.Component {

this.context.executeAction(navigateAction, {
method: 'GET',
url: this._getPath() + '?q=' + event.target.value
url: this._getPath() + '?q=' + event.target.value,
});
}
}
Expand All @@ -83,12 +83,14 @@ class Search extends React.Component {
let classes = cx({
'D(ib) Mstart(3px) Ov(h) Va(m) Pos(a) End(20px)': true,
'W(0)': this.state.visible === false,
'W(200px)': this.state.visible
'W(200px)': this.state.visible,
});
return (
<div className="D(ib)">
<form className={classes}>
<label htmlFor="q" className="hidden">Search</label>
<label htmlFor="q" className="hidden">
Search
</label>
<input
ref="q"
type="text"
Expand All @@ -99,14 +101,17 @@ class Search extends React.Component {
id="q"
/>
</form>
<i className="Va(m) Pos(r) fa fa-search Cur(p)" onClick={this._toggleSearchVisibility.bind(this)}></i>
<i
className="Va(m) Pos(r) fa fa-search Cur(p)"
onClick={this._toggleSearchVisibility.bind(this)}
></i>
</div>
);
}
}

Search = connectToStores(Search, [ SearchStore ], (context) => ({
search: context.getStore(SearchStore).getState()
Search = connectToStores(Search, [SearchStore], (context) => ({
search: context.getStore(SearchStore).getState(),
}));

export default Search;