mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Moved common code between Checkbox and ToggleSwitch to child component

Browse source
This commit is contained in:
Alejandro Celaya 2020-07-14 16:12:14 +02:00
parent a675d60d59
commit d2f818c1ea
3 changed files with 42 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/utils/BooleanControl.js Normal file
View file

@ -0,0 +1,36 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { v4 as uuid } from 'uuid';
export const basePropTypes = {
checked: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
children: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
className: PropTypes.string,
};
const propTypes = {
...basePropTypes,
type: PropTypes.oneOf([ 'switch', 'checkbox' ]).isRequired,
};
const BooleanControl = ({ checked, onChange, className, children, type }) => {
const id = uuid();
const onChecked = (e) => onChange(e.target.checked, e);
const typeClasses = {
'custom-switch': type === 'switch',
'custom-checkbox': type === 'checkbox',
};
return (
<span className={classNames('custom-control', typeClasses, className)} style={{ display: 'inline' }}>
<input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
<label className="custom-control-label" htmlFor={id}>{children}</label>
</span>
);
};
BooleanControl.propTypes = propTypes;
export default BooleanControl;

25
src/utils/Checkbox.js
View file

@ -1,27 +1,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import BooleanControl, { basePropTypes } from './BooleanControl';
import classNames from 'classnames';
import { v4 as uuid } from 'uuid';
const propTypes = { const Checkbox = (props) => <BooleanControl type="checkbox" {...props} />;
checked: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
children: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
className: PropTypes.string,
};
const Checkbox = ({ checked, onChange, className, children }) => { Checkbox.propTypes = basePropTypes;
const id = uuid();
const onChecked = (e) => onChange(e.target.checked, e);
return (
<span className={classNames('custom-control custom-checkbox', className)} style={{ display: 'inline' }}>
<input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
<label className="custom-control-label" htmlFor={id}>{children}</label>
</span>
);
};
Checkbox.propTypes = propTypes;
export default Checkbox; export default Checkbox;

25
src/utils/ToggleSwitch.js
View file

@ -1,27 +1,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import BooleanControl, { basePropTypes } from './BooleanControl';
import classNames from 'classnames';
import { v4 as uuid } from 'uuid';
const propTypes = { const ToggleSwitch = (props) => <BooleanControl type="switch" {...props} />;
checked: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
children: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
className: PropTypes.string,
};
const ToggleSwitch = ({ checked, onChange, className, children }) => { ToggleSwitch.propTypes = basePropTypes;
const id = uuid();
const onChecked = (e) => onChange(e.target.checked, e);
return (
<span className={classNames('custom-control custom-switch', className)} style={{ display: 'inline' }}>
<input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
<label className="custom-control-label" htmlFor={id}>{children}</label>
</span>
);
};
ToggleSwitch.propTypes = propTypes;
export default ToggleSwitch; export default ToggleSwitch;