| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
|
| 3 |
const save = (props) => { |
| 4 |
const { |
| 5 |
className, |
| 6 |
attributes: { |
| 7 |
dateTime, |
| 8 |
showDays, |
| 9 |
showHour, |
| 10 |
showMinute, |
| 11 |
showSecond, |
| 12 |
showLabel, |
| 13 |
customLabel, |
| 14 |
customLabelDays, |
| 15 |
customLabelHours, |
| 16 |
customLabelMinutes, |
| 17 |
customLabelSeconds, |
| 18 |
containerWidth, |
| 19 |
containerWidthUnit, |
| 20 |
counterPosition |
| 21 |
} |
| 22 |
} = props; |
| 23 |
|
| 24 |
let _className = `${className} timer-info`; |
| 25 |
const getContainerWidthUnit = () => 'undefined' === typeof containerWidthUnit || '' === containerWidthUnit ? '%' : containerWidthUnit; |
| 26 |
const getCounterPosition = () => 'undefined' === typeof counterPosition || '' === counterPosition ? 'center' : counterPosition; |
| 27 |
const getCustomLabelDays = () => 'undefined' === typeof customLabelDays ? 'Days' : customLabelDays; |
| 28 |
const getCustomLabelHours = () => 'undefined' === typeof customLabelHours ? 'Hours' : customLabelHours; |
| 29 |
const getCustomLabelMinutes = () => 'undefined' === typeof customLabelMinutes ? 'Minutes' : customLabelMinutes; |
| 30 |
const getCustomLabelSeconds = () => 'undefined' === typeof customLabelSeconds ? 'Seconds' : customLabelSeconds; |
| 31 |
const getSelectedDate = 'undefined' !== typeof dateTime ? dateTime : 'test'; |
| 32 |
|
| 33 |
const isShowDays = () => 'undefined' === typeof showDays || true === showDays ? true : false; |
| 34 |
const isShowLabel = () => 'undefined' === typeof showLabel || true === showLabel ? true : false; |
| 35 |
const isShowHour = () => 'undefined' === typeof showHour || true === showHour ? true : false; |
| 36 |
const isShowMinute = () => 'undefined' === typeof showMinute || true === showMinute ? true : false; |
| 37 |
const isShowSecond = () => 'undefined' === typeof showSecond || true === showSecond ? true : false; |
| 38 |
const isCustomLabel = 'undefined' === typeof customLabel || false === customLabel ? false : true; |
| 39 |
|
| 40 |
return ( |
| 41 |
<div className={_className} style={{ |
| 42 |
width: `${containerWidth ? containerWidth : 100}${getContainerWidthUnit()}`, |
| 43 |
marginTop: 0, |
| 44 |
marginBottom: 0, |
| 45 |
marginLeft: 'center' === getCounterPosition() || 'right' === getCounterPosition() ? 'auto' : 0, |
| 46 |
marginRight: 'center' === getCounterPosition() || 'left' === getCounterPosition() ? 'auto' : 0, |
| 47 |
}} > |
| 48 |
<div className="timer-count-down" data-endtime={getSelectedDate}> |
| 49 |
{isShowDays() && <><div className="time-part"><span className="days">{props.timerDays}</span> |
| 50 |
{isShowLabel() && <div className="days-label smalltext">{ isCustomLabel? getCustomLabelDays():'Days'}</div>} |
| 51 |
</div></>} |
| 52 |
|
| 53 |
{isShowHour() && <><div className="time-part"><span className="hours">{props.timerHour}</span> |
| 54 |
{isShowLabel() && <div className="hours-label smalltext">{isCustomLabel? getCustomLabelHours():'Hours'}</div>} |
| 55 |
</div></>} |
| 56 |
|
| 57 |
{isShowMinute() && <><div className="time-part"><span className="minutes">{props.timerMinute}</span> |
| 58 |
{isShowLabel() && <div className="minutes-label smalltext">{isCustomLabel?getCustomLabelMinutes():'Minutes'}</div>} |
| 59 |
</div></>} |
| 60 |
|
| 61 |
{isShowSecond() && <div className="time-part"><span className="seconds">{props.timerSecond}</span> |
| 62 |
{isShowLabel() && <div className="seconds-label smalltext">{isCustomLabel?getCustomLabelSeconds():'Seconds'}</div>} |
| 63 |
</div>} |
| 64 |
</div> |
| 65 |
</div> |
| 66 |
); |
| 67 |
}; |
| 68 |
|
| 69 |
export default save; |
