github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-09 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): rewrite MultiGridConfiguration component with hooks

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-04-30 17:26:48 +01:00
committed by Łukasz Mierzwa
parent faca57831c
commit 198a4178d2
1 changed files with 38 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
ui/src/Components/MainModal/Configuration/MultiGridConfiguration.js
View File

@@ -1,62 +1,48 @@
import React, { Component } from "react";
import React from "react";
import PropTypes from "prop-types";
import { action } from "mobx";
import { observer } from "mobx-react";
import { useObserver } from "mobx-react";
import { Settings } from "Stores/Settings";
import { ThemeContext } from "Components/Theme";
import { GridLabelName } from "./GridLabelName";
const MultiGridConfiguration = observer(
class MultiGridConfiguration extends Component {
static propTypes = {
settingsStore: PropTypes.instanceOf(Settings).isRequired,
};
static contextType = ThemeContext;
const MultiGridConfiguration = ({ settingsStore }) => {
const onSortReverseChange = (event) => {
settingsStore.multiGridConfig.config.gridSortReverse = event.target.checked;
};
onSortReverseChange = action((event) => {
const { settingsStore } = this.props;
settingsStore.multiGridConfig.config.gridSortReverse =
event.target.checked;
});
render() {
const { settingsStore } = this.props;
return (
<div className="form-group mb-0">
<div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
<div className="flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0">
<GridLabelName settingsStore={settingsStore} />
</div>
<div className="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0">
<span className="custom-control custom-switch">
<input
id="configuration-multigrid-sort-reverse"
className="custom-control-input"
type="checkbox"
value=""
checked={
settingsStore.multiGridConfig.config.gridSortReverse ||
false
}
onChange={this.onSortReverseChange}
/>
<label
className="custom-control-label cursor-pointer mr-3"
htmlFor="configuration-multigrid-sort-reverse"
>
Reverse order
</label>
</span>
</div>
</div>
return useObserver(() => (
<div className="form-group mb-0">
<div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
<div className="flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0">
<GridLabelName settingsStore={settingsStore} />
</div>
);
}
}
);
<div className="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0">
<span className="custom-control custom-switch">
<input
id="configuration-multigrid-sort-reverse"
className="custom-control-input"
type="checkbox"
value=""
checked={
settingsStore.multiGridConfig.config.gridSortReverse || false
}
onChange={onSortReverseChange}
/>
<label
className="custom-control-label cursor-pointer mr-3"
htmlFor="configuration-multigrid-sort-reverse"
>
Reverse order
</label>
</span>
</div>
</div>
</div>
));
};
MultiGridConfiguration.propTypes = {
settingsStore: PropTypes.instanceOf(Settings).isRequired,
};
export { MultiGridConfiguration };