UNPKG

@wordpress/block-library

Version:
8 lines (7 loc) 4.16 kB
{ "version": 3, "sources": ["../../src/form-input/save.js"], "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tRichText,\n\tuseBlockProps,\n\t__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,\n\t__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,\n} from '@wordpress/block-editor';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Get the name attribute from a content string.\n *\n * @param {string} content The block content.\n *\n * @return {string} Returns the slug.\n */\nconst getNameFromLabel = ( content ) => {\n\treturn (\n\t\tremoveAccents( stripHTML( content ) )\n\t\t\t// Convert anything that's not a letter or number to a hyphen.\n\t\t\t.replace( /[^\\p{L}\\p{N}]+/gu, '-' )\n\t\t\t// Convert to lowercase\n\t\t\t.toLowerCase()\n\t\t\t// Remove any remaining leading or trailing hyphens.\n\t\t\t.replace( /(^-+)|(-+$)/g, '' )\n\t);\n};\n\nexport default function save( { attributes } ) {\n\tconst { type, name, label, inlineLabel, required, placeholder, value } =\n\t\tattributes;\n\n\tconst borderProps = getBorderClassesAndStyles( attributes );\n\tconst colorProps = getColorClassesAndStyles( attributes );\n\n\tconst inputStyle = {\n\t\t...borderProps.style,\n\t\t...colorProps.style,\n\t};\n\n\tconst inputClasses = clsx(\n\t\t'wp-block-form-input__input',\n\t\tcolorProps.className,\n\t\tborderProps.className\n\t);\n\tconst TagName = type === 'textarea' ? 'textarea' : 'input';\n\n\tconst blockProps = useBlockProps.save();\n\n\t// Note: radio inputs aren't implemented yet.\n\tconst isCheckboxOrRadio = type === 'checkbox' || type === 'radio';\n\n\tif ( 'hidden' === type ) {\n\t\treturn <input type={ type } name={ name } value={ value } />;\n\t}\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ /* eslint-disable jsx-a11y/label-has-associated-control */ }\n\t\t\t<label\n\t\t\t\tclassName={ clsx( 'wp-block-form-input__label', {\n\t\t\t\t\t'is-label-inline': inlineLabel,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! isCheckboxOrRadio && (\n\t\t\t\t\t<span className=\"wp-block-form-input__label-content\">\n\t\t\t\t\t\t<RichText.Content value={ label } />\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t\t<TagName\n\t\t\t\t\tclassName={ inputClasses }\n\t\t\t\t\ttype={ 'textarea' === type ? undefined : type }\n\t\t\t\t\tname={ name || getNameFromLabel( label ) }\n\t\t\t\t\trequired={ required }\n\t\t\t\t\taria-required={ required }\n\t\t\t\t\tplaceholder={ placeholder || undefined }\n\t\t\t\t\tstyle={ inputStyle }\n\t\t\t\t/>\n\t\t\t\t{ isCheckboxOrRadio && (\n\t\t\t\t\t<span className=\"wp-block-form-input__label-content\">\n\t\t\t\t\t\t<RichText.Content value={ label } />\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</label>\n\t\t\t{ /* eslint-enable jsx-a11y/label-has-associated-control */ }\n\t\t</div>\n\t);\n}\n"], "mappings": ";AAGA,OAAO,UAAU;AACjB,OAAO,mBAAmB;AAK1B;AAAA,EACC;AAAA,EACA;AAAA,EACA,2CAA2C;AAAA,EAC3C,0CAA0C;AAAA,OACpC;AACP,SAAS,uBAAuB,iBAAiB;AA8CxC,cAMN,YANM;AArCT,IAAM,mBAAmB,CAAE,YAAa;AACvC,SACC,cAAe,UAAW,OAAQ,CAAE,EAElC,QAAS,oBAAoB,GAAI,EAEjC,YAAY,EAEZ,QAAS,gBAAgB,EAAG;AAEhC;AAEe,SAAR,KAAuB,EAAE,WAAW,GAAI;AAC9C,QAAM,EAAE,MAAM,MAAM,OAAO,aAAa,UAAU,aAAa,MAAM,IACpE;AAED,QAAM,cAAc,0BAA2B,UAAW;AAC1D,QAAM,aAAa,yBAA0B,UAAW;AAExD,QAAM,aAAa;AAAA,IAClB,GAAG,YAAY;AAAA,IACf,GAAG,WAAW;AAAA,EACf;AAEA,QAAM,eAAe;AAAA,IACpB;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,EACb;AACA,QAAM,UAAU,SAAS,aAAa,aAAa;AAEnD,QAAM,aAAa,cAAc,KAAK;AAGtC,QAAM,oBAAoB,SAAS,cAAc,SAAS;AAE1D,MAAK,aAAa,MAAO;AACxB,WAAO,oBAAC,WAAM,MAAc,MAAc,OAAgB;AAAA,EAC3D;AAEA,SACC,oBAAC,SAAM,GAAG,YAET;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,8BAA8B;AAAA,QAC/C,mBAAmB;AAAA,MACpB,CAAE;AAAA,MAEA;AAAA,SAAE,qBACH,oBAAC,UAAK,WAAU,sCACf,8BAAC,SAAS,SAAT,EAAiB,OAAQ,OAAQ,GACnC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACA,WAAY;AAAA,YACZ,MAAO,eAAe,OAAO,SAAY;AAAA,YACzC,MAAO,QAAQ,iBAAkB,KAAM;AAAA,YACvC;AAAA,YACA,iBAAgB;AAAA,YAChB,aAAc,eAAe;AAAA,YAC7B,OAAQ;AAAA;AAAA,QACT;AAAA,QACE,qBACD,oBAAC,UAAK,WAAU,sCACf,8BAAC,SAAS,SAAT,EAAiB,OAAQ,OAAQ,GACnC;AAAA;AAAA;AAAA,EAEF,GAED;AAEF;", "names": [] }