sforkowany z mirror/soapbox
Merge branch 'colorpicker-size' into 'develop'
Move react-color into soapbox_config, reduce initial bundle size, fixes #427 Closes #427 See merge request soapbox-pub/soapbox-fe!250drag_drop
Alex Gleason
commit
3e5d27bc07
|
|
@ -3,12 +3,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
|||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { SketchPicker } from 'react-color';
|
||||
import Overlay from 'react-overlays/lib/Overlay';
|
||||
import { isMobile } from '../../is_mobile';
|
||||
import detectPassiveEvents from 'detect-passive-events';
|
||||
|
||||
const FormPropTypes = {
|
||||
export const FormPropTypes = {
|
||||
label: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.object,
|
||||
|
|
@ -16,8 +12,6 @@ const FormPropTypes = {
|
|||
]),
|
||||
};
|
||||
|
||||
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
|
||||
|
||||
export const InputContainer = (props) => {
|
||||
const containerClass = classNames('input', {
|
||||
'with_label': props.label,
|
||||
|
|
@ -192,98 +186,6 @@ export class RadioGroup extends ImmutablePureComponent {
|
|||
|
||||
}
|
||||
|
||||
export class ColorPicker extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
style: PropTypes.object,
|
||||
value: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func,
|
||||
}
|
||||
|
||||
handleDocumentClick = e => {
|
||||
if (this.node && !this.node.contains(e.target)) {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('click', this.handleDocumentClick, false);
|
||||
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('click', this.handleDocumentClick, false);
|
||||
document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { style, value, onChange } = this.props;
|
||||
let margin_left_picker = isMobile(window.innerWidth) ? '20px' : '12px';
|
||||
|
||||
return (
|
||||
<div id='SketchPickerContainer' ref={this.setRef} style={{ ...style, marginLeft: margin_left_picker, position: 'absolute', zIndex: 1000 }}>
|
||||
<SketchPicker color={value} disableAlpha onChange={onChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class ColorWithPicker extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
buttonId: PropTypes.string.isRequired,
|
||||
label: FormPropTypes.label,
|
||||
value: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
onToggle = (e) => {
|
||||
if (!e.key || e.key === 'Enter') {
|
||||
if (this.state.active) {
|
||||
this.onHidePicker();
|
||||
} else {
|
||||
this.onShowPicker(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
state = {
|
||||
active: false,
|
||||
placement: null,
|
||||
}
|
||||
|
||||
onHidePicker = () => {
|
||||
this.setState({ active: false });
|
||||
}
|
||||
|
||||
onShowPicker = ({ target }) => {
|
||||
this.setState({ active: true });
|
||||
this.setState({ placement: isMobile(window.innerWidth) ? 'bottom' : 'right' });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { buttonId, label, value, onChange } = this.props;
|
||||
const { active, placement } = this.state;
|
||||
|
||||
return (
|
||||
<div className='label_input__color'>
|
||||
<label>{label}</label>
|
||||
<div id={buttonId} className='color-swatch' role='presentation' style={{ background: value }} title={value} value={value} onClick={this.onToggle} />
|
||||
<Overlay show={active} placement={placement} target={this}>
|
||||
<ColorPicker value={value} onChange={onChange} onClose={this.onHidePicker} />
|
||||
</Overlay>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class RadioItem extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
|
|
|
|||
|
|
@ -12,14 +12,18 @@ import {
|
|||
Checkbox,
|
||||
FileChooser,
|
||||
SimpleTextarea,
|
||||
ColorWithPicker,
|
||||
FileChooserLogo,
|
||||
FormPropTypes,
|
||||
} from 'soapbox/features/forms';
|
||||
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
|
||||
import { updateAdminConfig } from 'soapbox/actions/admin';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { defaultConfig } from 'soapbox/actions/soapbox';
|
||||
import { uploadMedia } from 'soapbox/actions/media';
|
||||
import { SketchPicker } from 'react-color';
|
||||
import Overlay from 'react-overlays/lib/Overlay';
|
||||
import { isMobile } from 'soapbox/is_mobile';
|
||||
import detectPassiveEvents from 'detect-passive-events';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
|
||||
|
|
@ -34,6 +38,8 @@ const messages = defineMessages({
|
|||
rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Advanced: Edit the settings data directly.' },
|
||||
});
|
||||
|
||||
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
|
||||
|
||||
const templates = {
|
||||
promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
|
||||
footerItem: ImmutableMap({ title: '', url: '' }),
|
||||
|
|
@ -363,3 +369,95 @@ class SoapboxConfig extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
class ColorPicker extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
style: PropTypes.object,
|
||||
value: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func,
|
||||
}
|
||||
|
||||
handleDocumentClick = e => {
|
||||
if (this.node && !this.node.contains(e.target)) {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('click', this.handleDocumentClick, false);
|
||||
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('click', this.handleDocumentClick, false);
|
||||
document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { style, value, onChange } = this.props;
|
||||
let margin_left_picker = isMobile(window.innerWidth) ? '20px' : '12px';
|
||||
|
||||
return (
|
||||
<div id='SketchPickerContainer' ref={this.setRef} style={{ ...style, marginLeft: margin_left_picker, position: 'absolute', zIndex: 1000 }}>
|
||||
<SketchPicker color={value} disableAlpha onChange={onChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class ColorWithPicker extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
buttonId: PropTypes.string.isRequired,
|
||||
label: FormPropTypes.label,
|
||||
value: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
onToggle = (e) => {
|
||||
if (!e.key || e.key === 'Enter') {
|
||||
if (this.state.active) {
|
||||
this.onHidePicker();
|
||||
} else {
|
||||
this.onShowPicker(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
state = {
|
||||
active: false,
|
||||
placement: null,
|
||||
}
|
||||
|
||||
onHidePicker = () => {
|
||||
this.setState({ active: false });
|
||||
}
|
||||
|
||||
onShowPicker = ({ target }) => {
|
||||
this.setState({ active: true });
|
||||
this.setState({ placement: isMobile(window.innerWidth) ? 'bottom' : 'right' });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { buttonId, label, value, onChange } = this.props;
|
||||
const { active, placement } = this.state;
|
||||
|
||||
return (
|
||||
<div className='label_input__color'>
|
||||
<label>{label}</label>
|
||||
<div id={buttonId} className='color-swatch' role='presentation' style={{ background: value }} title={value} value={value} onClick={this.onToggle} />
|
||||
<Overlay show={active} placement={placement} target={this}>
|
||||
<ColorPicker value={value} onChange={onChange} onClose={this.onHidePicker} />
|
||||
</Overlay>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue