Skip to content

Commit

Permalink
Add default value context (#1374)
Browse files Browse the repository at this point in the history
Add default value context
  • Loading branch information
hwbllmnn committed Mar 12, 2021
1 parent 90afe8c commit 24d21b7
Show file tree
Hide file tree
Showing 18 changed files with 384 additions and 57 deletions.
107 changes: 107 additions & 0 deletions src/Component/DefaultValueContext/DefaultValueContext.example.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!--
* Released under the BSD 2-Clause License
*
* Copyright © 2018-present, terrestris GmbH & Co. KG and GeoStyler contributors
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* * Redistributions of source code must retain the above copyright notice,
* this list of conditions and the following disclaimer.
*
* * Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*
-->

The `DefaultValueContext` lets you define default values for many fields.

In order to provide default values for some fields, a DefaultValueContext has to be wrapped around the editor.

#### Example

Provide some default values.

```jsx
import * as React from 'react';
import { DefaultValueContext, IconEditor } from 'geostyler';
import { Switch, InputNumber } from 'antd';

class DefaultValueExample extends React.Component {

constructor(props) {
super(props);

this.state = {
symbolizer: {
kind: 'Icon',
rotate: 180
},
customRotation: false
}

this.onSymbolizerChange = this.onSymbolizerChange.bind(this);
this.toggleCustomRotation = this.toggleCustomRotation.bind(this);
}

onSymbolizerChange(symbolizer) {
this.setState({
symbolizer: symbolizer
});
}

toggleCustomRotation(enable) {
this.setState({
customRotation: enable
});
}

render() {
const {
symbolizer,
customRotation
} = this.state;

const defaults = {
IconEditor: {
defaultOpacity: 1
}
};

return (
<div>
<span>Use custom component </span>
<Switch
checked={customRotation}
onChange={this.toggleCustomRotation}
checkedChildren="true"
unCheckedChildren="false"
/>
<hr/>
<DefaultValueContext.Provider value={defaults}>
<IconEditor
symbolizer={symbolizer}
onSymbolizerChange={this.onSymbolizerChange}
/>
</DefaultValueContext.Provider>
</div>
);
}
}

<CompositionContextExample />
```
89 changes: 89 additions & 0 deletions src/Component/DefaultValueContext/DefaultValueContext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
/* Released under the BSD 2-Clause License
*
* Copyright © 2018-present, terrestris GmbH & Co. KG and GeoStyler contributors
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* * Redistributions of source code must retain the above copyright notice,
* this list of conditions and the following disclaimer.
*
* * Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/

import { WellKnownName } from 'geostyler-style';
import * as React from 'react';

/**
* Creates the DefaultValueContext used for customising
* default values.
*/
export interface DefaultValues {
LineEditor?: {
defaultWidth?: number;
defaultColor?: string;
defaultOpacity?: number;
defaultDashOffset?: number;
defaultCap?: string;
defaultJoin?: string;
};
IconEditor?: {
defaultImage?: string;
defaultSize?: number;
defaultRotate?: number;
defaultOpacity?: number;
};
FillEditor?: {
defaultFillColor?: string;
defaultFillOpacity?: number;
defaultOpacity?: number;
defaultOutlineColor?: string;
defaultOutlineWidth?: number;
defaultOutlineOpacity?: number;
};
TextEditor?: {
defaultLabel?: string;
defaultColor?: string;
defaultFont?: string;
defaultOpacity?: number;
defaultSize?: number;
defaultOffsetX?: number;
defaultOffsetY?: number;
defaultRotate?: number;
defaultHaloColor?: string;
defaultHaloWidth?: number;
};
RasterEditor?: {
defaultOpacity?: number;
defaultGammaValue?: number;
};
MarkEditor?: {
defaultWellKnownName?: WellKnownName;
};
WellKnownNameEditor?: {
defaultRadius?: string;
defaultColor?: string;
defaultOpacity?: number;
defaultStrokeColor?: string;
defaultStrokeWidth?: number;
defaultStrokeOpacity?: number;
defaultRotate?: number;
};
}

export const DefaultValueContext = React.createContext({});
19 changes: 5 additions & 14 deletions src/Component/Symbolizer/Editor/Editor.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,40 +80,31 @@ describe('SymbolizerEditor', () => {
const symbolizer = SymbolizerUtil.generateSymbolizer('Mark');
const func = wrapper.instance().getUiFromSymbolizer;
const returnValue = func(symbolizer);
const got = shallow(returnValue).instance();
expect(got).toBeInstanceOf(MarkEditor);
expect(returnValue.props.symbolizer.kind).toEqual('Mark');
});
it('returns an IconEditor for Symbolizer with kind Icon', () => {
const symbolizer = SymbolizerUtil.generateSymbolizer('Icon');
const func = wrapper.instance().getUiFromSymbolizer;
const returnValue = func(symbolizer);
const localeWrapper = shallow(returnValue);
const got = shallow(localeWrapper.get(0)).instance();
expect(got).toBeInstanceOf(IconEditor);
expect(returnValue.props.symbolizer.kind).toEqual('Icon');
});
it('returns a LineEditor for Symbolizer with kind Line', () => {
const symbolizer = SymbolizerUtil.generateSymbolizer('Line');
const func = wrapper.instance().getUiFromSymbolizer;
const returnValue = func(symbolizer);
const localeWrapper = shallow(returnValue);
const got = shallow(localeWrapper.get(0)).instance();
expect(got).toBeInstanceOf(LineEditor);
expect(returnValue.props.symbolizer.kind).toEqual('Line');
});
it('returns a FillEditor for Symbolizer with kind Fill', () => {
const symbolizer = SymbolizerUtil.generateSymbolizer('Fill');
const func = wrapper.instance().getUiFromSymbolizer;
const returnValue = func(symbolizer);
const localeWrapper = shallow(returnValue);
const got = shallow(localeWrapper.get(0)).instance();
expect(got).toBeInstanceOf(FillEditor);
expect(returnValue.props.symbolizer.kind).toEqual('Fill');
});
it('returns a TextEditor for Symbolizer with kind Text', () => {
const symbolizer = SymbolizerUtil.generateSymbolizer('Text');
const func = wrapper.instance().getUiFromSymbolizer;
const returnValue = func(symbolizer);
const localeWrapper = shallow(returnValue);
const got = shallow(localeWrapper.get(0)).instance();
expect(got).toBeInstanceOf(TextEditor);
expect(returnValue.props.symbolizer.kind).toEqual('Text');
});
it('returns the unknownSymbolizerText prop as default', () => {
const func = wrapper.instance().getUiFromSymbolizer;
Expand Down
8 changes: 5 additions & 3 deletions src/Component/Symbolizer/Field/ColorField/ColorField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ interface ColorFieldDefaultProps {
export interface ColorFieldProps extends Partial<ColorFieldDefaultProps> {
onChange?: (color: string) => void;
color?: string;
defaultValue?: string;
}

// state
Expand Down Expand Up @@ -114,14 +115,15 @@ export class ColorField extends React.Component<ColorFieldProps, ColorFieldState
const {
color,
locale,
defaultValue
} = this.props;
let textColor;

if (!color) {
if (!color && !defaultValue) {
textColor = '#000000';
} else {
try {
textColor = Color(color).negate().grayscale().string();
textColor = Color(color || defaultValue).negate().grayscale().string();
} catch (error) {
textColor = '#000000';
}
Expand All @@ -133,7 +135,7 @@ export class ColorField extends React.Component<ColorFieldProps, ColorFieldState
<Button
className="color-preview editor-field"
style={{
backgroundColor: color,
backgroundColor: color || defaultValue,
color: textColor
}}
onClick={this.onColorPreviewClick}
Expand Down

0 comments on commit 24d21b7

Please sign in to comment.