All files / app/shipping/shippingOption ShippingOptionAdditionalDescription.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
18x
 
18x
18x
18x
 
 
 
 
 
18x
22x
 
22x
 
22x
 
 
23x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18x
 
import React, { memo } from 'react';
 
import { preventDefault } from '../../common/dom';
import { TranslatedString } from '../../locale';
import { Toggle } from '../../ui/toggle';
 
interface ShippingOptionAdditionalDescriptionProps {
    description: string;
}
 
const ShippingOptionAdditionalDescription: React.FunctionComponent<ShippingOptionAdditionalDescriptionProps> = ({
description,
}) => {
    const CHRACTER_LIMIT = 45;
 
    return (
        <div className="shippingOption-additionalDescription--container">
            <Toggle openByDefault={ description.length < CHRACTER_LIMIT }>
                { ({ isOpen, toggle }) => (
                    <>
                        <span className={ `shippingOption-additionalDescription ${ isOpen ?
                            'shippingOption-additionalDescription--expanded' : 'shippingOption-additionalDescription--collapsed' }` }
                        >
                            { description }
                        </span>
                        { !isOpen &&
                            <a className="shippingOption-readMore" onClick={ preventDefault(toggle) }>
                            <TranslatedString id="common.show_more" />
                        </a> }
                    </>
                ) }
            </Toggle>
        </div>
    );
};
 
export default memo(ShippingOptionAdditionalDescription);