mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
Merge trunk
This commit is contained in:
Emili Castells Guasch
commit
6ec624d37b
77 changed files with 3278 additions and 1090 deletions
|
|
@ -1,107 +1,138 @@
|
|||
import { CheckboxControl } from '@wordpress/components';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export const PayPalCheckbox = ( props ) => {
|
||||
let isChecked = null;
|
||||
export const PayPalCheckbox = ( {
|
||||
currentValue,
|
||||
label,
|
||||
value,
|
||||
checked = null,
|
||||
disabled = null,
|
||||
changeCallback,
|
||||
} ) => {
|
||||
let isChecked = checked;
|
||||
|
||||
if ( Array.isArray( props.currentValue ) ) {
|
||||
isChecked = props.currentValue.includes( props.value );
|
||||
} else {
|
||||
isChecked = props.currentValue;
|
||||
if ( null === isChecked ) {
|
||||
if ( Array.isArray( currentValue ) ) {
|
||||
isChecked = currentValue.includes( value );
|
||||
} else {
|
||||
isChecked = currentValue;
|
||||
}
|
||||
}
|
||||
|
||||
const className = classNames( { 'is-disabled': disabled } );
|
||||
|
||||
const onChange = ( newState ) => {
|
||||
let newValue;
|
||||
|
||||
if ( ! Array.isArray( currentValue ) ) {
|
||||
newValue = newState;
|
||||
} else if ( newState ) {
|
||||
newValue = [ ...currentValue, value ];
|
||||
} else {
|
||||
newValue = currentValue.filter(
|
||||
( optionValue ) => optionValue !== value
|
||||
);
|
||||
}
|
||||
|
||||
changeCallback( newValue );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r__checkbox">
|
||||
<CheckboxControl
|
||||
label={ props?.label ? props.label : '' }
|
||||
value={ props.value }
|
||||
checked={ isChecked }
|
||||
onChange={ ( checked ) =>
|
||||
handleCheckboxState( checked, props )
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<CheckboxControl
|
||||
label={ label }
|
||||
value={ value }
|
||||
checked={ isChecked }
|
||||
disabled={ disabled }
|
||||
onChange={ onChange }
|
||||
className={ className }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const PayPalCheckboxGroup = ( props ) => {
|
||||
const renderCheckboxGroup = () => {
|
||||
return props.value.map( ( checkbox ) => {
|
||||
return (
|
||||
<PayPalCheckbox
|
||||
label={ checkbox.label }
|
||||
value={ checkbox.value }
|
||||
key={ checkbox.value }
|
||||
currentValue={ props.currentValue }
|
||||
changeCallback={ props.changeCallback }
|
||||
/>
|
||||
);
|
||||
} );
|
||||
};
|
||||
export const CheckboxGroup = ( { options, value, onChange } ) => (
|
||||
<>
|
||||
{ options.map( ( checkbox ) => (
|
||||
<PayPalCheckbox
|
||||
key={ checkbox.value }
|
||||
label={ checkbox.label }
|
||||
value={ checkbox.value }
|
||||
checked={ checkbox.checked }
|
||||
disabled={ checkbox.disabled }
|
||||
description={ checkbox.description }
|
||||
tooltip={ checkbox.tooltip }
|
||||
currentValue={ value }
|
||||
changeCallback={ onChange }
|
||||
/>
|
||||
) ) }
|
||||
</>
|
||||
);
|
||||
|
||||
return <>{ renderCheckboxGroup() }</>;
|
||||
};
|
||||
|
||||
export const PayPalRdb = ( props ) => {
|
||||
export const PayPalRdb = ( {
|
||||
id,
|
||||
name,
|
||||
value,
|
||||
currentValue,
|
||||
handleRdbState,
|
||||
} ) => {
|
||||
return (
|
||||
<div className="ppcp-r__radio">
|
||||
{ /* todo: Can we remove the wrapper div? */ }
|
||||
<input
|
||||
id={ props?.id }
|
||||
className="ppcp-r__radio-value"
|
||||
type="radio"
|
||||
checked={ props.value === props.currentValue }
|
||||
name={ props.name }
|
||||
value={ props.value }
|
||||
onChange={ () => props.handleRdbState( props.value ) }
|
||||
id={ id }
|
||||
checked={ value === currentValue }
|
||||
name={ name }
|
||||
value={ value }
|
||||
onChange={ () => handleRdbState( value ) }
|
||||
/>
|
||||
<span className="ppcp-r__radio-presentation"></span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PayPalRdbWithContent = ( props ) => {
|
||||
const className = [ 'ppcp-r__radio-wrapper' ];
|
||||
|
||||
if ( props?.className ) {
|
||||
className.push( props.className );
|
||||
}
|
||||
export const PayPalRdbWithContent = ( {
|
||||
className,
|
||||
id,
|
||||
name,
|
||||
label,
|
||||
description,
|
||||
value,
|
||||
currentValue,
|
||||
handleRdbState,
|
||||
toggleAdditionalContent,
|
||||
children,
|
||||
} ) => {
|
||||
const wrapperClasses = classNames( 'ppcp-r__radio-wrapper', className );
|
||||
|
||||
return (
|
||||
<div className="ppcp-r__radio-outer-wrapper">
|
||||
<div className={ className }>
|
||||
<PayPalRdb { ...props } />
|
||||
<div className={ wrapperClasses }>
|
||||
<PayPalRdb
|
||||
id={ id }
|
||||
name={ name }
|
||||
value={ value }
|
||||
currentValue={ currentValue }
|
||||
handleRdbState={ handleRdbState }
|
||||
/>
|
||||
|
||||
<div className="ppcp-r__radio-content">
|
||||
<label htmlFor={ props?.id }>{ props.label }</label>
|
||||
{ props.description && (
|
||||
<label htmlFor={ id }>{ label }</label>
|
||||
{ description && (
|
||||
<p
|
||||
className="ppcp-r__radio-description"
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: props.description,
|
||||
__html: description,
|
||||
} }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
{ props?.toggleAdditionalContent &&
|
||||
props.children &&
|
||||
props.value === props.currentValue && (
|
||||
<div className="ppcp-r__radio-content-additional">
|
||||
{ props.children }
|
||||
</div>
|
||||
) }
|
||||
{ toggleAdditionalContent && children && value === currentValue && (
|
||||
<div className="ppcp-r__radio-content-additional">
|
||||
{ children }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const handleCheckboxState = ( checked, props ) => {
|
||||
let newValue = null;
|
||||
if ( ! Array.isArray( props.currentValue ) ) {
|
||||
newValue = checked;
|
||||
} else if ( checked ) {
|
||||
newValue = [ ...props.currentValue, props.value ];
|
||||
} else {
|
||||
newValue = props.currentValue.filter(
|
||||
( value ) => value !== props.value
|
||||
);
|
||||
}
|
||||
props.changeCallback( newValue );
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* Temporary component, until the experimental HStack block editor component is stable.
|
||||
*
|
||||
* @see https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-hstack--docs
|
||||
* @file
|
||||
*/
|
||||
import classNames from 'classnames';
|
||||
|
||||
const HStack = ( { className, spacing = 3, children } ) => {
|
||||
const wrapperClass = classNames(
|
||||
'components-flex components-h-stack',
|
||||
className
|
||||
);
|
||||
|
||||
const styles = {
|
||||
gap: `calc(${ 4 * spacing }px)`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={ wrapperClass } style={ styles }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HStack;
|
||||
|
|
@ -1,9 +1,24 @@
|
|||
import classNames from 'classnames';
|
||||
|
||||
// Block Elements
|
||||
export const Title = ( { children, className = '' } ) => (
|
||||
<span className={ `ppcp-r-settings-block__title ${ className }`.trim() }>
|
||||
{ children }
|
||||
</span>
|
||||
);
|
||||
export const Title = ( {
|
||||
children,
|
||||
altStyle = false,
|
||||
big = false,
|
||||
className = '',
|
||||
} ) => {
|
||||
const elementClasses = classNames(
|
||||
'ppcp-r-settings-block__title',
|
||||
className,
|
||||
{
|
||||
'style-alt': altStyle,
|
||||
'style-big': big,
|
||||
}
|
||||
);
|
||||
|
||||
return <span className={ elementClasses }>{ children }</span>;
|
||||
};
|
||||
|
||||
export const TitleWrapper = ( { children } ) => (
|
||||
<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
|
||||
);
|
||||
|
|
@ -14,13 +29,28 @@ export const SupplementaryLabel = ( { children } ) => (
|
|||
</span>
|
||||
);
|
||||
|
||||
export const Description = ( { children, className = '' } ) => (
|
||||
<span
|
||||
className={ `ppcp-r-settings-block__description ${ className }`.trim() }
|
||||
>
|
||||
{ children }
|
||||
</span>
|
||||
);
|
||||
export const Description = ( { children, asHtml = false, className = '' } ) => {
|
||||
// Don't output anything if description is empty.
|
||||
if ( ! children ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const elementClasses = classNames(
|
||||
'ppcp-r-settings-block__description',
|
||||
className
|
||||
);
|
||||
|
||||
if ( ! asHtml ) {
|
||||
return <span className={ elementClasses }>{ children }</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={ elementClasses }
|
||||
dangerouslySetInnerHTML={ { __html: children } }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Action = ( { children } ) => (
|
||||
<div className="ppcp-r-settings-block__action">{ children }</div>
|
||||
|
|
@ -33,11 +63,18 @@ export const Header = ( { children, className = '' } ) => (
|
|||
);
|
||||
|
||||
// Card Elements
|
||||
export const Content = ( { children, id = '' } ) => (
|
||||
<div id={ id } className="ppcp-r-settings-card__content">
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
export const Content = ( { children, className = '', id = '' } ) => {
|
||||
const elementClasses = classNames(
|
||||
'ppcp-r-settings-card__content',
|
||||
className
|
||||
);
|
||||
|
||||
return (
|
||||
<div id={ id } className={ elementClasses }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ContentWrapper = ( { children } ) => (
|
||||
<div className="ppcp-r-settings-card__content-wrapper">{ children }</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
