Skip to content

Commit

Permalink
Rewrite as function component, decruftify, update tests
Browse files Browse the repository at this point in the history
  • Loading branch information
stokesman committed Mar 16, 2022
1 parent e2436a2 commit 8163f00
Show file tree
Hide file tree
Showing 8 changed files with 182 additions and 352 deletions.
8 changes: 4 additions & 4 deletions packages/components/src/focal-point-picker/controls.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@ const TEXTCONTROL_MAX = 100;

export default function FocalPointPickerControls( {
onChange = noop,
percentages = {
point = {
x: 0.5,
y: 0.5,
},
} ) {
const valueX = fractionToPercentage( percentages.x );
const valueY = fractionToPercentage( percentages.y );
const valueX = fractionToPercentage( point.x );
const valueY = fractionToPercentage( point.y );

const handleChange = ( value, axis ) => {
const num = parseInt( value, 10 );

if ( ! isNaN( num ) ) {
onChange( { ...percentages, [ axis ]: num / 100 } );
onChange( { ...point, [ axis ]: num / 100 } );
}
};

Expand Down
7 changes: 2 additions & 5 deletions packages/components/src/focal-point-picker/focal-point.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,12 @@ import {
*/
import classnames from 'classnames';

export default function FocalPoint( {
coordinates = { left: '50%', top: '50%' },
...props
} ) {
export default function FocalPoint( { left = '50%', top = '50%', ...props } ) {
const classes = classnames(
'components-focal-point-picker__icon_container'
);

const style = { ...coordinates };
const style = { left, top };

return (
<FocalPointWrapper { ...props } className={ classes } style={ style }>
Expand Down
6 changes: 1 addition & 5 deletions packages/components/src/focal-point-picker/grid.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,7 @@ import { useUpdateEffect } from '../utils/hooks';
const { clearTimeout, setTimeout } =
typeof window !== 'undefined' ? window : {};

export default function FocalPointPickerGrid( {
bounds = {},
value,
...props
} ) {
export default function FocalPointPickerGrid( { bounds, value, ...props } ) {
const animationProps = useRevealAnimation( value );
const style = {
width: bounds.width,
Expand Down
Loading

0 comments on commit 8163f00

Please sign in to comment.