Support leading zeroes for the number field

classes/fields/number.php

@@ -82,6 +82,16 @@ public function options() {
 				'type'        => 'boolean',
 				'excludes-on' => array( static::$type . '_decimals' => 0 ),
 			),
+			static::$type . '_keep_leading_zeroes' => array(
+				'label'       => __( 'Keep Leading Zeroes', 'pods' ),
+				'help'        => __( 'By default, Pods will remove leading zeroes from numbers like "00123" which will become "123". When you keep them, the zeroes at the start of the value will be preserved when formatted.', 'pods' ),
+				'default'     => 0,
+				'type'        => 'boolean',
+				'depends-on' => array(
+					static::$type . '_format_type' => 'number',
+					static::$type . '_html5' => false,
+				),
+			),
 			static::$type . '_step'        => array(
 				'label'      => __( 'Slider Increment (Step)', 'pods' ),
 				'depends-on' => array( static::$type . '_format_type' => 'slider' ),
@@ -147,6 +157,10 @@ public function schema( $options = null ) {
 
 		$schema = 'DECIMAL(' . $length . ',' . $decimals . ')';
 
+		if ( 1 === (int) pods_v( static::$type . '_keep_leading_zeroes', $options, 0 ) ) {
+			$schema = 'VARCHAR(' . $length . ')';
+		}
+
 		return $schema;
 
 	}
@@ -235,6 +249,7 @@ public function input( $name, $value = null, $options = null, $pod = null, $id =
 		// Enforce boolean.
 		$options[ static::$type . '_html5' ]       = filter_var( pods_v( static::$type . '_html5', $options, false ), FILTER_VALIDATE_BOOLEAN );
 		$options[ static::$type . '_format_soft' ] = filter_var( pods_v( static::$type . '_format_soft', $options, false ), FILTER_VALIDATE_BOOLEAN );
+		$options[ static::$type . '_keep_leading_zeroes' ] = filter_var( pods_v( static::$type . '_keep_leading_zeroes', $options, false ), FILTER_VALIDATE_BOOLEAN );
 
 		// Only format the value for non-HTML5 inputs.
 		if ( ! $options[ static::$type . '_html5' ] ) {
@@ -346,13 +361,26 @@ public function pre_save( $value, $id = null, $name = null, $options = null, $fi
 			return null;
 		}
 
+		$prefix = null;
+
+		if (
+			1 === (int) pods_v( static::$type . '_keep_leading_zeroes', $options, 0 )
+			&& preg_match( '/^(0+)/', $value, $leading_zeroes )
+		) {
+			$prefix = $leading_zeroes[0];
+		}
+
 		$value = number_format( (float) $value, $decimals, '.', '' );
 
 		// Optionally remove trailing decimal zero's.
 		if ( pods_v( static::$type . '_format_soft', $options, false ) ) {
 			$value = $this->trim_decimals( $value, '.' );
 		}
 
+		if ( null !== $prefix ) {
+			$value = $prefix . $value;
+		}
+
 		return $value;
 	}
 
@@ -371,6 +399,15 @@ public function format( $value = null, $name = null, $options = null, $pod = nul
 		$dot         = $format_args['dot'];
 		$decimals    = $format_args['decimals'];
 
+		$prefix = null;
+
+		if (
+			1 === (int) pods_v( static::$type . '_keep_leading_zeroes', $options, 0 )
+			&& preg_match( '/^(0+)/', $value, $leading_zeroes )
+		) {
+			$prefix = $leading_zeroes[0];
+		}
+
 		if ( 'i18n' === pods_v( static::$type . '_format', $options ) ) {
 			$value = number_format_i18n( (float) $value, $decimals );
 		} else {
@@ -382,6 +419,10 @@ public function format( $value = null, $name = null, $options = null, $pod = nul
 			$value = $this->trim_decimals( $value, $dot );
 		}
 
+		if ( null !== $prefix ) {
+			$value = $prefix . $value;
+		}
+
 		return $value;
 	}
 

ui/js/dfv/pods-dfv.min.asset.json

@@ -1 +1 @@
-{"dependencies":["lodash","moment","react","react-dom","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-hooks","wp-i18n","wp-keycodes","wp-plugins","wp-polyfill","wp-primitives","wp-url"],"version":"0d4d9fb35b69e492260e"}
+{"dependencies":["lodash","moment","react","react-dom","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-hooks","wp-i18n","wp-keycodes","wp-plugins","wp-polyfill","wp-primitives","wp-url"],"version":"c895d44f4e59a315e2b2"}

ui/js/dfv/src/fields/number-field/index.js

@@ -29,6 +29,7 @@ const NumberField = ( {
 		number_format: format,
 		number_format_soft: softFormat,
 		number_format_type: type = 'number',
+		number_keep_leading_zeroes: keepLeadingZeroes = false,
 		number_html5: html5,
 		number_max: max,
 		number_max_length: digitMaxLength,
@@ -43,7 +44,7 @@ const NumberField = ( {
 	// a formatted string, so be able to handle either one, but keep
 	// a formatted version available locally.
 	const [ formattedValue, setFormattedValue ] = useState(
-		formatNumberWithPodsFormat( value, format, softFormat )
+		formatNumberWithPodsFormat( value, format, softFormat, keepLeadingZeroes )
 	);
 
 	useEffect( () => {
@@ -71,7 +72,7 @@ const NumberField = ( {
 			setValue( parseFloatWithPodsFormat( event.target.value, 0 <= event.target.value.indexOf( ',' ) ? '9999.99' : '9999,99' ) );
 			setFormattedValue( formatNumberWithPodsFormat( event.target.value, format, softFormat ) );
 		} else {
-			setValue( parseFloatWithPodsFormat( event.target.value, format ) );
+			setValue( parseFloatWithPodsFormat( event.target.value, format, keepLeadingZeroes ) );
 			setFormattedValue( event.target.value );
 		}
 	};
@@ -80,7 +81,8 @@ const NumberField = ( {
 		const newFormattedValue = formatNumberWithPodsFormat(
 			value,
 			format,
-			softFormat
+			softFormat,
+			keepLeadingZeroes,
 		);
 
 		setFormattedValue( newFormattedValue );

ui/js/dfv/src/helpers/formatNumberWithPodsFormat.js

@@ -69,36 +69,50 @@ export const getDecimalSeparatorFromPodsFormat = ( format ) => {
 };
 
 export const parseFloatWithPodsFormat = (
-	newValue,
-	format
+	value,
+	format,
+	keepLeadingZeroes = false,
 ) => {
 	// Turn empty string to 0.
-	if ( '' === newValue ) {
+	if ( '' === value || undefined === value || null === value || false === value ) {
 		return 0;
 	}
 
 	// If we get a float value, we don't need to do anything.
-	if ( 'number' === typeof newValue ) {
-		return newValue;
+	if ( 'number' === typeof value ) {
+		return value;
+	}
+
+	let prefix = null;
+
+	if ( keepLeadingZeroes ) {
+		prefix = ( value.match( /^0+/ ) || [ '' ] )[ 0 ];
 	}
 
 	const thousands = getThousandsSeparatorFromPodsFormat( format );
 	const dot = getDecimalSeparatorFromPodsFormat( format );
 
 	// Remove the thousands separators and change the decimal separator to a period,
 	// so that parseFloat can handle the rest.
-	return parseFloat(
-		newValue.split( thousands ).join( '' ).split( dot ).join( '.' )
+	let newValue = parseFloat(
+		value.split( thousands ).join( '' ).split( dot ).join( '.' )
 	);
+
+	if ( keepLeadingZeroes && prefix ) {
+		newValue = prefix + newValue.toString();
+	}
+
+	return newValue;
 };
 
 export const formatNumberWithPodsFormat = (
 	newValue,
 	format,
 	trimZeroDecimals = false,
+	keepLeadingZeroes = false,
 ) => {
 	// Skip empty strings or undefined.
-	if ( '' === newValue || undefined === newValue || null === newValue ) {
+	if ( '' === newValue || undefined === newValue || null === newValue || false === newValue ) {
 		return '0';
 	}
 
@@ -110,12 +124,23 @@ export const formatNumberWithPodsFormat = (
 		? parseFloatWithPodsFormat( newValue, format )
 		: newValue;
 
-	const formattedNumber = isNaN( floatNewValue )
-		? undefined
-		: formatNumber( floatNewValue, 'auto', dotSeparator, thousands );
+	if ( isNaN( floatNewValue ) ) {
+		return undefined;
+	}
+
+	let formattedNumber = formatNumber( floatNewValue, 'auto', dotSeparator, thousands );
+	let prefix = null;
+
+	if ( keepLeadingZeroes ) {
+		prefix = ( newValue.match( /^0+/ ) || [ '' ] )[ 0 ];
+	}
+
+	if ( keepLeadingZeroes && prefix ) {
+		formattedNumber = prefix + formattedNumber.toString();
+	}
 
 	// We may need to trim decimals
-	if ( ! trimZeroDecimals || undefined === formattedNumber ) {
+	if ( ! trimZeroDecimals ) {
 		return formattedNumber;
 	}