New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@eeacms/volto-block-style

Package Overview
Dependencies
Maintainers
8
Versions
78
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@eeacms/volto-block-style - npm Package Compare versions

Comparing version 3.4.5 to 3.5.0

9

CHANGELOG.md

@@ -7,4 +7,13 @@ ### Changelog

#### [3.5.0](https://github.com/eea/volto-block-style/compare/3.4.5...3.5.0)
- Various improvements [`#29`](https://github.com/eea/volto-block-style/pull/29)
- Release 3.5.0 [`0a5a98e`](https://github.com/eea/volto-block-style/commit/0a5a98e531f93470956673e50b6c71f37f59b49e)
- Add Sonarqube tag using ims-frontend addons list [`30bb3aa`](https://github.com/eea/volto-block-style/commit/30bb3aa5f49ed5264cf609d6b8f234b07b7988ca)
#### [3.4.5](https://github.com/eea/volto-block-style/compare/3.4.4...3.4.5)
> 31 August 2021
- Develop [`#28`](https://github.com/eea/volto-block-style/pull/28)
- Lint fix 2 [`dbdf49a`](https://github.com/eea/volto-block-style/commit/dbdf49a842f07019444ad3ee87ceccf6504c48f1)

@@ -11,0 +20,0 @@ - Lint fix [`20ea653`](https://github.com/eea/volto-block-style/commit/20ea653087ec1f9167b46e482128412d25dcdf05)

2

package.json
{
"name": "@eeacms/volto-block-style",
"version": "3.4.5",
"version": "3.5.0",
"description": "volto-block-style: Volto add-on",

@@ -5,0 +5,0 @@ "main": "src/index.js",

2

src/StyleWrapper/schema.js

@@ -101,3 +101,3 @@ import config from '@plone/volto/registry';

title: 'Background image',
widget: 'object_by_path',
widget: 'url',
},

@@ -104,0 +104,0 @@ backgroundColor: {

2

src/StyleWrapper/StyleWrapperView.jsx

@@ -19,3 +19,3 @@ import React from 'react';

const getSide = (side, v) =>
`${v[side] ? `${v[side]}${v.unit ? v.unit : 'px'}` : ''}`;
`${v[side] ? `${v[side]}${v.unit ? v.unit : 'px'}` : '0px'}`;

@@ -22,0 +22,0 @@ const getSides = (v) => {

10

src/Widgets/range.css.js

@@ -5,7 +5,7 @@ const styles = {

width: '100%',
height: '20px',
height: '30px',
},
inner: {
margin: '0 10px 0 10px',
height: '20px',
height: '30px',
position: 'relative',

@@ -22,3 +22,3 @@ },

borderRadius: '4px',
top: '9px',
top: '12px',
left: '0',

@@ -35,3 +35,3 @@ backgroundColor: 'rgba(0,0,0,.05)',

borderRadius: '4px',
top: '9px',
top: '12px',
left: '0',

@@ -47,3 +47,3 @@ backgroundColor: '#1b1c1d',

left: '0',
height: '20px',
height: '30px',
width: '20px',

@@ -50,0 +50,0 @@ background: '#fff linear-gradient(transparent, rgba(0, 0, 0, 0.5))',

214

src/Widgets/Slider.jsx

@@ -8,3 +8,2 @@ // Copied from MIT-licensed https://github.com/iozbeyli/react-semantic-ui-range

import { FormFieldWrapper } from '@plone/volto/components';
// import { withParentSize } from '@visx/responsive';

@@ -14,2 +13,7 @@ import styles from './range.css.js';

function isNumeric(str) {
if (typeof str != 'string') return false; // we only process strings!
return !isNaN(str);
}
export class Slider extends Component {

@@ -30,2 +34,3 @@ constructor(props) {

mouseDown: false,
showNumericInput: false,
};

@@ -35,2 +40,3 @@ this.determinePosition = this.determinePosition.bind(this);

this.refresh = this.refresh.bind(this);
this.handleKnobClick = this.handleKnobClick.bind(this);
}

@@ -304,90 +310,128 @@

handleKnobClick(e) {
if (e.detail > 1 && !this.state.showNumericInput) {
this.setState({ showNumericInput: true });
}
}
render() {
return (
<div className="slider-widget-wrapper">
<div
tabIndex="-1"
role="button"
onMouseDown={(event) => this.rangeMouseDown(false, event)}
onMouseMove={(event) => this.rangeMouseMove(false, event)}
onMouseUp={(event) => this.rangeMouseUp(false, event)}
onTouchEnd={(event) => this.rangeMouseUp(true, event)}
onTouchMove={(event) => this.rangeMouseMove(true, event)}
onTouchStart={(event) => this.rangeMouseDown(true, event)}
style={{
...styles.range,
...(this.props.disabled ? styles.disabled : {}),
...(this.props.style ? this.props.style : {}),
}}
>
{this.state.showNumericInput ? (
<input
defaultValue={this.props.value}
onKeyDown={(e) => {
// TODO: handle multiple knobs
if (e.key === 'Enter' && isNumeric(e.target.value)) {
const value = e.target.value;
this.setState({ showNumericInput: false }, () => {
this.props.settings.onChange(parseInt(value));
});
}
}}
/>
) : (
<div
className="semantic_ui_range_inner"
ref={(inner) => {
this.inner = inner;
}}
tabIndex="-1"
role="button"
onMouseDown={(event) => this.rangeMouseDown(false, event)}
onMouseMove={(event) => this.rangeMouseMove(false, event)}
onMouseUp={(event) => this.rangeMouseUp(false, event)}
onTouchEnd={(event) => this.rangeMouseUp(true, event)}
onTouchMove={(event) => this.rangeMouseMove(true, event)}
onTouchStart={(event) => this.rangeMouseDown(true, event)}
style={{
...styles.inner,
...(this.props.style
? this.props.style.inner
? this.props.style.inner
: {}
: {}),
...styles.range,
...(this.props.disabled ? styles.disabled : {}),
...(this.props.style ? this.props.style : {}),
}}
>
<div
className="slider-track"
ref={(track) => {
this.track = track;
className="semantic_ui_range_inner"
ref={(inner) => {
this.inner = inner;
}}
style={{
...styles.track,
...(this.props.inverted ? styles.invertedTrack : {}),
...styles.inner,
...(this.props.style
? this.props.style.track
? this.props.style.track
? this.props.style.inner
? this.props.style.inner
: {}
: {}),
}}
/>
<div
className="slider-track-active"
ref={(trackFill) => {
this.trackFill = trackFill;
}}
style={{
...styles.trackFill,
...(this.props.inverted ? styles.invertedTrackFill : {}),
...styles[
this.props.inverted
? 'inverted-' + this.props.color
: this.props.color
],
...(this.props.style
? this.props.style.trackFill
>
<div
className="slider-track"
ref={(track) => {
this.track = track;
}}
style={{
...styles.track,
...(this.props.inverted ? styles.invertedTrack : {}),
...(this.props.style
? this.props.style.track
? this.props.style.track
: {}
: {}),
}}
/>
<div
className="slider-track-active"
ref={(trackFill) => {
this.trackFill = trackFill;
}}
style={{
...styles.trackFill,
...(this.props.inverted ? styles.invertedTrackFill : {}),
...styles[
this.props.inverted
? 'inverted-' + this.props.color
: this.props.color
],
...(this.props.style
? this.props.style.trackFill
: {}
: {}),
...(this.props.disabled ? styles.disabledTrackFill : {}),
...(this.props.style
? this.props.style.disabledTrackFill
? this.props.style.trackFill
: {}
: {}),
...(this.props.disabled ? styles.disabledTrackFill : {}),
...(this.props.style
? this.props.style.disabledTrackFill
: {}
: {}),
...{ width: this.state.position + this.state.offset + 'px' },
...(this.props.multiple && this.state.position.length > 0
? {
left: this.state.position[0],
width:
this.state.position[this.state.numberOfKnobs - 1] -
this.state.position[0],
}
: {}),
}}
/>
? this.props.style.disabledTrackFill
: {}
: {}),
...{ width: this.state.position + this.state.offset + 'px' },
...(this.props.multiple && this.state.position.length > 0
? {
left: this.state.position[0],
width:
this.state.position[this.state.numberOfKnobs - 1] -
this.state.position[0],
}
: {}),
}}
/>
{this.props.multiple ? (
this.state.position.map((pos, i) => (
{this.props.multiple ? (
this.state.position.map((pos, i) => (
<div
className="slider-knob multiple"
key={i}
style={{
...styles.knob,
...(this.props.style
? this.props.style.knob
? this.props.style.knob
: {}
: {}),
...{ left: pos + 'px' },
}}
/>
))
) : (
<div
className="slider-knob multiple"
key={i}
tabindex="-1"
role="button"
className="slider-knob single"
onKeyDown={this.handleKnobKeydown}
onClick={this.handleKnobClick}
style={{

@@ -400,24 +444,11 @@ ...styles.knob,

: {}),
...{ left: pos + 'px' },
...{ left: this.state.position + 'px' },
}}
/>
))
) : (
<div
className="slider-knob single"
style={{
...styles.knob,
...(this.props.style
? this.props.style.knob
? this.props.style.knob
: {}
: {}),
...{ left: this.state.position + 'px' },
}}
>
{this.props.extra}
</div>
)}
>
{this.props.extra}
</div>
)}
</div>
</div>
</div>
)}
</div>

@@ -465,2 +496,3 @@ );

onChange: (value) => {
// console.log('onchange', value);
onChange(id, value);

@@ -467,0 +499,0 @@ },

Jenkinsfile

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc