{
+ props.setValue && props.setValue(val);
+ return props.setValue(val); // Formsy's setValue
+ }}
+ />
+);
-export default withFormsy(FormsySegmentedControl)
+export default withFormsy(FormsySegmentedControl);
diff --git a/src/SegmentedControl.js b/src/SegmentedControl.js
index 0222856..43f9a19 100644
--- a/src/SegmentedControl.js
+++ b/src/SegmentedControl.js
@@ -1,68 +1,65 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import find from 'lodash/find'
-import extend from 'lodash/extend'
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import find from "lodash/find";
+import extend from "lodash/extend";
-import './SegmentedControl.css'
+import "./SegmentedControl.css";
-class SegmentedControl extends Component {
- static propTypes = {
- className: PropTypes.string,
- name: PropTypes.string.isRequired,
- options: PropTypes.array.isRequired,
- style: PropTypes.object,
- setValue: PropTypes.func
- }
+const SegmentedControl = ({ className, name, options, style, setValue }) => {
+ useEffect(() => {
+ return () => {
+ const defaultOption = find(options, { default: true });
+ setValue(defaultOption.value);
+ };
+ });
- componentWillMount() {
- const defaultOption = find(this.props.options, { default: true })
- this.setValue(defaultOption.value)
- }
+ function setValue(val) {
+ setValue && setValue(val);
+ }
- setValue(val) {
- this.props.setValue && this.props.setValue(val)
- }
+ const getId = option => name + option.value;
- render() {
- const getId = option => this.props.name + option.value
+ const defaultStyle = {
+ width: "100%"
+ };
- const defaultStyle = {
- width: '100%'
- }
+ const StyleComponent = extend(defaultStyle, style);
- const style = extend(defaultStyle, this.props.style)
+ let containerClassName = "segmented-control";
+ if (typeof className !== "undefined") {
+ containerClassName = `${containerClassName} ${className}`;
+ }
+ return (
+
+ {options.map(option => (
+
+ ))}
+ {options.map(option => (
+
+ ))}
+
+ );
+};
- let containerClassName = 'segmented-control'
-
- if (typeof this.props.className !== 'undefined') {
- containerClassName = `${containerClassName} ${this.props.className}`
- }
+export default SegmentedControl;
- return (
-
- {this.props.options.map(option => (
-
- ))}
- {this.props.options.map(option => (
-
- ))}
-
- )
- }
-}
-
-export default SegmentedControl
+SegmentedControl.propTypes = {
+ className: PropTypes.string,
+ name: PropTypes.string.isRequired,
+ options: PropTypes.array.isRequired,
+ style: PropTypes.object,
+ setValue: PropTypes.func
+};
diff --git a/src/index.js b/src/index.js
index 45274c8..96c638a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,2 +1,2 @@
-export SegmentedControl from './SegmentedControl'
-export FormsySegmentedControl from './FormsySegmentedControl'
+export SegmentedControl from "./SegmentedControl";
+export FormsySegmentedControl from "./FormsySegmentedControl";
diff --git a/src/stories/index.js b/src/stories/index.js
index 20ba9a5..fdaadfa 100644
--- a/src/stories/index.js
+++ b/src/stories/index.js
@@ -21,7 +21,9 @@ storiesOf('SegmentedControl', module)
]}
style={{ width: 300, color: '#42a5f5' }} // blue400
setValue={action('setValue')}
- />
+ >
+ Mapa
+
))
.add('Three options', () => (