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

Added functionality for the icons of the map control to make it overrideable on the theme #1273

Merged
merged 7 commits into from
Sep 15, 2020
Merged

Added functionality for the icons of the map control to make it overrideable on the theme #1273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1610789
Replace mapcontrol icons
nicolasmartinrojo Sep 9, 2020
5f28cf6
Add map control icons
nicolasmartinrojo Sep 11, 2020
f79586c
fix default icons on mapcontrol
nicolasmartinrojo Sep 14, 2020
132e397
extend components to be able to override icons
nicolasmartinrojo Sep 15, 2020
c07c322
Fix dependencies for map controls
nicolasmartinrojo Sep 15, 2020
26124c2
fix demo app map control factory
heshan0131 Sep 15, 2020
594c71f
delete comment code
heshan0131 Sep 15, 2020
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
23 changes: 3 additions & 20 deletions examples/demo-app/src/components/map-control/map-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,9 @@

import React, {useState} from 'react';
import styled from 'styled-components';
import {MapControlFactory, Icons, IconRoundSmall, MapControlButton} from 'kepler.gl/components';
import ReactMarkdown from 'react-markdown';

const MapControl = MapControlFactory();
import {Icons, IconRoundSmall, MapControlButton} from 'kepler.gl/components';

const StyledMapControlOverlay = styled.div`
position: absolute;
top: ${props => props.top}px;
right: 0px;
z-index: 1;
`;
import ReactMarkdown from 'react-markdown';

const StyledFloatingPanel = styled.div`
margin-right: 12px;
Expand Down Expand Up @@ -130,7 +122,7 @@ function getURL(url) {
: url;
}

function SampleMapPanel(props) {
export function SampleMapPanel(props) {
const [isActive, setActive] = useState(true);

return (
Expand Down Expand Up @@ -175,12 +167,3 @@ function SampleMapPanel(props) {
</StyledFloatingPanel>
);
}

const CustomMapControl = props => (
<StyledMapControlOverlay top={props.top}>
{!props.isExport && props.currentSample ? <SampleMapPanel {...props} /> : null}
<MapControl {...props} top={0} />
</StyledMapControlOverlay>
);

export default CustomMapControl;
28 changes: 23 additions & 5 deletions examples/demo-app/src/factories/map-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,30 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import {MapControlFactory} from 'kepler.gl/components';
import CustomMapControl from '../components/map-control/map-control';
import {withState} from 'kepler.gl/components';
import React from 'react';
import styled from 'styled-components';
import {MapControlFactory, withState} from 'kepler.gl/components';
import {SampleMapPanel} from '../components/map-control/map-control';

export const CustomMapControlFactory = () =>
withState([], state => ({...state.demo.app}))(CustomMapControl);
CustomMapControlFactory.deps = MapControlFactory.deps;
function CustomMapControlFactory(...deps) {
const MapControl = MapControlFactory(...deps);
const StyledMapControlOverlay = styled.div`
position: absolute;
top: ${props => props.top}px;
right: 0px;
z-index: 1;
`;

const CustomMapControl = props => (
<StyledMapControlOverlay top={props.top}>
{!props.isExport && props.currentSample ? <SampleMapPanel {...props} /> : null}
<MapControl {...props} top={0} />
</StyledMapControlOverlay>
);

return withState([], state => ({...state.demo.app}))(CustomMapControl);
}

export function replaceMapControl() {
return [MapControlFactory, CustomMapControlFactory];
Expand Down
12 changes: 9 additions & 3 deletions src/components/filters/filter-panels/filter-panel-with-field-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,23 @@
import React, {useCallback, useMemo} from 'react';
import {StyledFilterContent} from 'components/common/styled-components';
import FilterPanelHeaderFactory from 'components/side-panel/filter-panel/filter-panel-header';
import PanelHeaderAction from 'components/side-panel/panel-header-action';
import PanelHeaderActionFactory from 'components/side-panel/panel-header-action';
import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
import FieldSelectorFactory from '../../common/field-selector';

FieldPanelWithFieldSelectFactory.deps = [
FilterPanelHeaderFactory,
SourceDataSelectorFactory,
FieldSelectorFactory
FieldSelectorFactory,
PanelHeaderActionFactory
];

function FieldPanelWithFieldSelectFactory(FilterPanelHeader, SourceDataSelector, FieldSelector) {
function FieldPanelWithFieldSelectFactory(
FilterPanelHeader,
SourceDataSelector,
FieldSelector,
PanelHeaderAction
) {
const FilterPanelWithFieldSelect = React.memo(
({
allAvailableFields,
Expand Down
10 changes: 7 additions & 3 deletions src/components/filters/filter-panels/polygon-filter-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,21 @@
import React, {useMemo, useCallback} from 'react';
import {StyledFilterContent} from 'components/common/styled-components';
import PolygonFilterFactory from 'components/filters/polygon-filter';
import PanelHeaderAction from 'components/side-panel/panel-header-action';
import PanelHeaderActionFactory from 'components/side-panel/panel-header-action';
import {EyeSeen} from 'components/common/icons';
import {EyeUnseen} from 'components/common/icons';
import FilterPanelHeaderFactory from 'components/side-panel/filter-panel/filter-panel-header';
import {StyledFilterPanel} from '../components';

import get from 'lodash.get';

PolygonFilterPanelFactory.deps = [FilterPanelHeaderFactory, PolygonFilterFactory];
PolygonFilterPanelFactory.deps = [
FilterPanelHeaderFactory,
PolygonFilterFactory,
PanelHeaderActionFactory
];

function PolygonFilterPanelFactory(FilterPanelHeader, PolygonFilter) {
function PolygonFilterPanelFactory(FilterPanelHeader, PolygonFilter, PanelHeaderAction) {
const PolygonFilterPanel = React.memo(
({
idx,
Expand Down
12 changes: 10 additions & 2 deletions src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import LayerConfigGroupFactory from './side-panel/layer-panel/layer-config-group
import {ChannelByValueSelectorFactory} from './side-panel/layer-panel/layer-configurator';
import FieldSelectorFactory from './common/field-selector';
import FieldTokenFactory from './common/field-token';
import PanelHeaderActionFactory from './side-panel/panel-header-action';
import {appInjector} from './container';

// Components
Expand All @@ -45,7 +46,7 @@ export {
SaveExportDropdownFactory,
PanelHeaderDropdownFactory
} from './side-panel/panel-header';
export {default as PanelHeaderAction} from './side-panel/panel-header-action';
export {default as PanelHeaderActionFactory} from './side-panel/panel-header-action';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still need to export PanelHeaderAction

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

export {CollapseButtonFactory, default as SidebarFactory} from './side-panel/side-bar';
export {default as PanelToggleFactory} from './side-panel/panel-toggle';

Expand Down Expand Up @@ -79,6 +80,12 @@ export {default as MapPopoverFactory} from './map/map-popover';
export {default as MapControlFactory} from './map/map-control';
export {default as LayerHoverInfoFactory} from './map/layer-hover-info';
export {default as CoordinateInfoFactory} from './map/coordinate-info';
export {
Toggle3dButtonFactory,
MapDrawPanelFactory,
SplitMapButtonFactory,
MapLegendPanelFactory
} from './map/map-control';

// // modal factories
export {default as ModalDialogFactory} from './modals/modal-dialog';
Expand Down Expand Up @@ -140,10 +147,10 @@ export {default as FileUploadProgress} from './common/file-uploader/file-upload-
export {default as Slider} from './common/slider/slider';
export {DatasetSquare} from './common/styled-components';
export {default as ActionPanel, ActionPanelItem} from 'components/common/action-panel';

// side pane components
export {default as LayerTypeSelector} from './side-panel/layer-panel/layer-type-selector';
export {ConfigGroupCollapsibleContent} from './side-panel/layer-panel/layer-config-group';
export {default as FilterPanelHeaderFactory} from './side-panel/filter-panel/filter-panel-header';
export {
LayerLabelEditor,
LayerTitleSectionFactory
Expand All @@ -167,6 +174,7 @@ export const LayerConfigGroup = appInjector.get(LayerConfigGroupFactory);
export const ChannelByValueSelector = appInjector.get(ChannelByValueSelectorFactory);
export const FieldSelector = appInjector.get(FieldSelectorFactory);
export const FieldToken = appInjector.get(FieldTokenFactory);
export const PanelHeaderAction = appInjector.get(PanelHeaderActionFactory);

export {
TimeRangeSliderFactory,
Expand Down
Loading