All files / molecule/imageEditor/src ImageEditorSliders.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
import PropTypes from 'prop-types'
 
import AtomSlider from '@s-ui/react-atom-slider'
 
import {baseClass} from './config.js'
 
const ImageEditorSliders = ({
  rotateLabelIcon,
  rotateLabelText,
  cropLabelIcon,
  cropLabelText,
  onZoomChange,
  onRotateChange,
  zoom,
  rotation
}) => (
  <div className={`${baseClass}-sliders`}>
    <div className={`${baseClass}-slider`}>
      {(cropLabelIcon || cropLabelText) && (
        <div className={`${baseClass}-label`}>
          {cropLabelIcon && <span className={`${baseClass}-labelIcon`}>{cropLabelIcon}</span>}
          {cropLabelText && <span className={`${baseClass}-labelText`}>{cropLabelText}</span>}
        </div>
      )}
      <AtomSlider onChange={onZoomChange} defaultValue={zoom} hideMarks />
    </div>
    <div className={`${baseClass}-slider`}>
      {(rotateLabelIcon || rotateLabelText) && (
        <div className={`${baseClass}-label`}>
          {rotateLabelIcon && <span className={`${baseClass}-labelIcon`}>{rotateLabelIcon}</span>}
          {rotateLabelText && <span className={`${baseClass}-labelText`}>{rotateLabelText}</span>}
        </div>
      )}
      <AtomSlider onChange={onRotateChange} defaultValue={rotation} hideMarks />
    </div>
  </div>
)
 
ImageEditorSliders.displayName = 'ImageEditorSliders'
ImageEditorSliders.propTypes = {
  rotateLabelIcon: PropTypes.node,
  rotateLabelText: PropTypes.string,
  cropLabelIcon: PropTypes.node,
  cropLabelText: PropTypes.string,
  onZoomChange: PropTypes.func,
  onRotateChange: PropTypes.func,
  zoom: PropTypes.number,
  rotation: PropTypes.number
}
 
export default ImageEditorSliders