Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rating field and single submit #387

Merged
merged 36 commits into from
Mar 11, 2024
Merged
Changes from 3 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
06b1bba
small fixes for JS on older version
iruzevic Feb 28, 2024
526a7e7
update
iruzevic Feb 29, 2024
0ef2277
update
iruzevic Feb 29, 2024
434cd9b
update
iruzevic Feb 29, 2024
068c817
update
iruzevic Feb 29, 2024
2104ab5
updating PR
iruzevic Mar 1, 2024
1cc6278
update
iruzevic Mar 1, 2024
65d5510
update
iruzevic Mar 4, 2024
3c7cdc0
update
iruzevic Mar 4, 2024
0c0295e
update
iruzevic Mar 5, 2024
4932a96
update
iruzevic Mar 5, 2024
4e75c99
update
iruzevic Mar 7, 2024
47743b2
update
iruzevic Mar 7, 2024
625c223
update
iruzevic Mar 7, 2024
08dd36d
update
iruzevic Mar 8, 2024
1345746
update
iruzevic Mar 8, 2024
8235e7d
update
iruzevic Mar 8, 2024
c657a05
update
iruzevic Mar 8, 2024
675357f
update
iruzevic Mar 8, 2024
636186c
update
iruzevic Mar 8, 2024
6254037
Update CHANGELOG.md
iruzevic Mar 8, 2024
5124389
Update src/Blocks/custom/calculator/calculator-hooks.js
iruzevic Mar 8, 2024
188b182
Update CHANGELOG.md
iruzevic Mar 8, 2024
c3b018a
Update src/Blocks/components/input/components/input-options.js
iruzevic Mar 8, 2024
1a0684f
Update src/Blocks/components/input/input-style.scss
iruzevic Mar 8, 2024
432df7d
update
iruzevic Mar 8, 2024
f7b4318
update
iruzevic Mar 8, 2024
e309b8c
update
iruzevic Mar 8, 2024
2b188e9
update
iruzevic Mar 11, 2024
058e1dc
Apply suggestions from code review
iruzevic Mar 11, 2024
cc4ce00
Apply suggestions from code review
iruzevic Mar 11, 2024
7a98d44
Apply suggestions from code review
iruzevic Mar 11, 2024
9c70861
update
iruzevic Mar 11, 2024
e285efa
update
iruzevic Mar 11, 2024
d444677
Update src/Blocks/custom/result-output/components/result-output-optio…
iruzevic Mar 11, 2024
55d91e4
update
iruzevic Mar 11, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion composer.json
Original file line number Diff line number Diff line change
@@ -37,10 +37,16 @@
"szepeviktor/phpstan-wordpress": "^1.3",
"wp-cli/wp-cli": "^2.9"
},
"repositories": [
{
"type": "vcs",
"url": "https://github.com/infinum/eightshift-forms-utils.git"
}
],
"require": {
"php": "^7.4 || >=8.0",
"erusev/parsedown": "^1.7.4",
"infinum/eightshift-forms-utils": "^1.2.4"
"infinum/eightshift-forms-utils": "dev-feature/calculator"
},
"suggest": {
iruzevic marked this conversation as resolved.
Show resolved Hide resolved
"ext-pcov": "* || This extension is used for code coverage generation. Use either pcov, or xdebug, but not both.",
39 changes: 27 additions & 12 deletions composer.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/Blocks/components/form/assets/form.js
Original file line number Diff line number Diff line change
@@ -1503,7 +1503,7 @@ export class Form {
const formId = this.state.getFormIdByElement(event.target);

if (this.state.getStateFormStepsIsUsed(formId)) {
const button = event.submitter;
const button = event?.submitter;
const field = this.state.getFormFieldElementByChild(button);

// Steps flow.
10 changes: 5 additions & 5 deletions src/Blocks/components/form/assets/state.js
Original file line number Diff line number Diff line change
@@ -536,19 +536,19 @@ export class State {
return Object?.values(Object?.fromEntries(Object?.entries(getState([obj], formId) ?? {})?.filter(([key, value]) => value[targetKey] === findItem))); // eslint-disable-line no-unused-vars
};
getFormElementByChild = (element) => {
return element.closest(this.getStateSelector('form', true));
return element?.closest(this.getStateSelector('form', true));
};
getFormFieldElementByChild = (element) => {
return element.closest(this.getStateSelector('field', true));
return element?.closest(this.getStateSelector('field', true));
};
getFormId = (element) => {
return element.getAttribute(this.getStateAttribute('formId'));
return element?.getAttribute(this.getStateAttribute('formId'));
};
getFormIdByElement = (element) => {
return this.getFormElementByChild(element).getAttribute(this.getStateAttribute('formId'));
return this.getFormElementByChild(element)?.getAttribute(this.getStateAttribute('formId'));
};
getFieldNameByElement = (element) => {
return this.getFormFieldElementByChild(element).getAttribute(this.getStateAttribute('fieldName'));
return this.getFormFieldElementByChild(element)?.getAttribute(this.getStateAttribute('fieldName'));
};
getRestUrl = (value, isPartial = false) => {
return getRestUrl(value, isPartial);
36 changes: 23 additions & 13 deletions src/Blocks/components/input/components/input-editor.js
Original file line number Diff line number Diff line change
@@ -23,29 +23,39 @@ export const InputEditor = (attributes) => {
const inputName = checkAttr('inputName', attributes, manifest);
const inputValue = checkAttr('inputValue', attributes, manifest);
const inputPlaceholder = checkAttr('inputPlaceholder', attributes, manifest);
let inputType = checkAttr('inputType', attributes, manifest);
const inputType = checkAttr('inputType', attributes, manifest);
const inputMin = checkAttr('inputMin', attributes, manifest);
const inputMax = checkAttr('inputMax', attributes, manifest);
const inputStep = checkAttr('inputStep', attributes, manifest);

preventSaveOnMissingProps(blockClientId, getAttrKey('inputName', attributes, manifest), inputName);

// For some reason React won't allow input type email.
if (inputType === 'email' || inputType === 'url') {
inputType = 'text';
}

const inputClass = classnames([
selector(componentClass, componentClass),
selector(additionalClass, additionalClass),
]);
iruzevic marked this conversation as resolved.
Show resolved Hide resolved

const input = (
<>
<input
className={inputClass}
value={inputValue}
placeholder={inputPlaceholder}
type={inputType}
readOnly
/>
{inputType === 'range' ?
<input
className={inputClass}
placeholder={inputPlaceholder}
type={'range'}
readOnly
min={inputMin}
max={inputMax}
step={inputStep}
value={inputValue ?? inputMin}
/> :
<input
className={inputClass}
value={inputValue}
placeholder={inputPlaceholder}
type={inputType}
readOnly
/>
iruzevic marked this conversation as resolved.
Show resolved Hide resolved
}

<MissingName value={inputName} />

18 changes: 10 additions & 8 deletions src/Blocks/components/input/components/input-options.js
Original file line number Diff line number Diff line change
@@ -81,6 +81,9 @@ export const InputOptions = (attributes) => {
inputValidationPatternOptions = esFormsLocalization.validationPatternsOptions;
}

// Output number to 2 decimal places if it's a float if not output to fixed number.
iruzevic marked this conversation as resolved.
Show resolved Hide resolved
const formatNumber = (number) => (Number.isInteger(number) ? number.toString() : number.toFixed(2));

return (
<PanelBody title={title}>
<Section showIf={showInputPlaceholder || showInputType || showInputName} icon={icons.options} label={__('General', 'eightshift-forms')}>
@@ -113,7 +116,7 @@ export const InputOptions = (attributes) => {
setAttributes({ [getAttrKey('inputIsEmail', attributes, manifest)]: true });
}

if (value === 'number') {
if (value === 'number' || value === 'range') {
setAttributes({ [getAttrKey('inputIsNumber', attributes, manifest)]: true });
}

@@ -213,7 +216,7 @@ export const InputOptions = (attributes) => {
/>
}

{(showInputMinLength || showInputMaxLength) &&
{(!['number', 'range'].includes(inputType) && (showInputMinLength || showInputMaxLength)) &&
<Control
icon={icons.textLength}
label={__('Entry length', 'eightshift-forms')}
@@ -276,7 +279,7 @@ export const InputOptions = (attributes) => {
</Control>
}

{inputType === 'number' && (showInputMin || showInputMax) &&
{((inputType === 'number' || inputType === 'range') && (showInputMin || showInputMax)) &&
<Control
icon={icons.range}
label={__('Value range', 'eightshift-forms')}
@@ -288,7 +291,7 @@ export const InputOptions = (attributes) => {
<NumberPicker
label={__('Min', 'eightshift-forms')}
value={inputMin}
onChange={(value) => setAttributes({ [getAttrKey('inputMin', attributes, manifest)]: value })}
onChange={(value) => setAttributes({ [getAttrKey('inputMin', attributes, manifest)]: formatNumber(value) })}
min={options.inputMin.min}
step={options.inputMin.step}
disabled={isOptionDisabled(getAttrKey('inputMin', attributes, manifest), inputDisabledOptions)}
@@ -314,7 +317,7 @@ export const InputOptions = (attributes) => {
<NumberPicker
label={__('Max', 'eightshift-forms')}
value={inputMax}
onChange={(value) => setAttributes({ [getAttrKey('inputMax', attributes, manifest)]: value })}
onChange={(value) => setAttributes({ [getAttrKey('inputMax', attributes, manifest)]: formatNumber(value) })}
min={options.inputMax.min}
step={options.inputMax.step}
disabled={isOptionDisabled(getAttrKey('inputMax', attributes, manifest), inputDisabledOptions)}
@@ -338,18 +341,17 @@ export const InputOptions = (attributes) => {
</Control>
}

{inputType === 'number' && showInputStep &&
{(inputType === 'number' || inputType === 'range') && showInputStep &&
<Control label={__('Increment step', 'eightshift-forms')} additionalLabelClasses='es-mb-0!'>
<div className='es-display-flex es-items-end es-gap-2'>
<NumberPicker
value={inputStep}
onChange={(value) => setAttributes({ [getAttrKey('inputStep', attributes, manifest)]: value })}
onChange={(value) => setAttributes({ [getAttrKey('inputStep', attributes, manifest)]: formatNumber(value) })}
min={options.inputStep.min}
step={options.inputStep.step}
disabled={isOptionDisabled(getAttrKey('inputStep', attributes, manifest), inputDisabledOptions)}
fixedWidth={4}
noBottomSpacing
placeholder='1'
/>

{inputStep > 0 && !isOptionDisabled(getAttrKey('inputStep', attributes, manifest), inputDisabledOptions) &&
1 change: 0 additions & 1 deletion src/Blocks/components/input/input-admin.scss
Original file line number Diff line number Diff line change
@@ -49,7 +49,6 @@ input.es-input {
}
}


.es-field__content:has(.es-field__before-content):has(.es-field__after-content):has(.es-input:focus-visible) {
.es-field__after-content,
.es-field__before-content {
4 changes: 4 additions & 0 deletions src/Blocks/components/input/input-editor.scss
Original file line number Diff line number Diff line change
@@ -2,6 +2,10 @@

input.es-input {
@include input-styles-editor;

&[type='range'] {
padding: 0 !important; // stylelint-disable-line declaration-no-important
}
}

// Collision with WPML.
17 changes: 17 additions & 0 deletions src/Blocks/components/input/input-style.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,20 @@
input.es-input {
@include input-styles;

&[type='range'] {
padding: 0;
appearance: none;
background: transparent;
block-size: 0.9375rem;

&::-webkit-slider-thumb,
&::-moz-range-thumb {
appearance: none;
height: 1.45rem;
width: 1.45rem;
iruzevic marked this conversation as resolved.
Show resolved Hide resolved
cursor: pointer;
background-color: var(--global-colors-esf-admin-accent);
border-radius: 50%;
}
}
}
15 changes: 10 additions & 5 deletions src/Blocks/components/input/input.php
Original file line number Diff line number Diff line change
@@ -44,11 +44,6 @@
Components::selector($additionalClass, $additionalClass),
]);

// Override types.
if ($inputType === 'email' || $inputType === 'url') {
$inputType = 'text';
}

if ($inputValue) {
$inputAttrs['value'] = esc_attr($inputValue);
}
@@ -62,6 +57,16 @@
$inputHideLabel = true;
}

if ($inputType === 'range') {
$inputAttrs['min'] = esc_attr($inputMin);
$inputAttrs['max'] = esc_attr($inputMax);
$inputAttrs['step'] = esc_attr($inputStep);

if (!$inputValue) {
$inputAttrs['value'] = esc_attr($inputMin);
}
}

$inputAttrsOutput = '';
if ($inputAttrs) {
foreach ($inputAttrs as $key => $value) {
16 changes: 10 additions & 6 deletions src/Blocks/components/input/manifest.json
Original file line number Diff line number Diff line change
@@ -114,6 +114,10 @@
{
"label": "Number",
"value": "number"
},
{
"label": "Range",
"value": "range"
}
],
"inputMinLength": {
@@ -125,16 +129,16 @@
"step": 1
},
"inputMin": {
"min": 0,
"step": 1
"min": 0.01,
"step": 0.01
},
"inputMax": {
"min": 1,
"step": 1
"min": 0.01,
"step": 0.01
},
"inputStep": {
"min": 1,
"step": 1
"min": 0.01,
"step": 0.01
}
}
}
2 changes: 1 addition & 1 deletion src/Blocks/components/phone/components/phone-options.js
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ export const PhoneOptions = (attributes) => {
const phoneName = checkAttr('phoneName', attributes, manifest);
const phoneValue = checkAttr('phoneValue', attributes, manifest);
const phonePlaceholder = checkAttr('phonePlaceholder', attributes, manifest);
const phoneIsNumber = checkAttr('phoneIsNumber', attributes, manifest);
const phoneIsNumber = checkAttr('phoneIsNumber', attributes, manifest); // Used in validation class to validate if the input is a number.
const phoneIsDisabled = checkAttr('phoneIsDisabled', attributes, manifest);
const phoneIsReadOnly = checkAttr('phoneIsReadOnly', attributes, manifest);
const phoneIsRequired = checkAttr('phoneIsRequired', attributes, manifest);
Loading