diff --git a/.eslintrc.json b/.eslintrc.json index 3a72491..aa77e68 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -17,7 +17,8 @@ "no-unused-vars": ["warn"], "react/jsx-one-expression-per-line": ["off"], "react-hooks/rules-of-hooks": "error", - "react-hooks/exhaustive-deps": "warn" + "react-hooks/exhaustive-deps": "warn", + "react/no-unused-prop-types": "warn" }, "extends": ["airbnb", "prettier"] } diff --git a/README.md b/README.md index 0a203d8..5b2f2f7 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ Then in your React component: | onChange | ({hours: number, minutes: number, seconds: number}) => void | () => {} | Callback executed by DurationPicker whenever the duration displayed on the picker is updated | | initialDuration | {hours: number, minutes: number, seconds: number} | {hours: 0, minutes: 0, seconds: 0} | Duration to display on first render | | maxHours | number | 10 | Max number of hours that can be selected | +| noHours | boolean | false | If true, omits 'hours' column from picker | # Example diff --git a/src/DurationPicker.jsx b/src/DurationPicker.jsx index a272424..d0e8d5e 100644 --- a/src/DurationPicker.jsx +++ b/src/DurationPicker.jsx @@ -11,16 +11,18 @@ DurationPicker.propTypes = { seconds: PropTypes.number, }), maxHours: PropTypes.number, + noHours: PropTypes.bool, }; DurationPicker.defaultProps = { maxHours: 10, onChange: () => {}, initialDuration: { hours: 0, minutes: 0, seconds: 0 }, + noHours: false, }; function DurationPicker(props) { - const { onChange, maxHours, initialDuration } = props; + const { onChange, maxHours, initialDuration, noHours } = props; const [isSmallScreen, setIsSmallScreen] = useState(undefined); const [duration, setDuration] = useState(initialDuration); @@ -57,13 +59,15 @@ function DurationPicker(props) { }, [duration, onChange]); return (
- + {!noHours && ( + + )}