corvée(dépendances) ajoute Carbon Fields

web/vendor/htmlburger/carbon-fields/packages/metaboxes/components/container/index.js

@@ -0,0 +1,177 @@
+/**
+ * External dependencies.
+ */
+import cx from 'classnames';
+import { Component } from '@wordpress/element';
+import {
+	map,
+	find,
+	kebabCase,
+	isPlainObject
+} from 'lodash';
+
+/**
+ * Carbon Fields dependencies.
+ */
+import { getFieldType } from '@carbon-fields/core';
+
+/**
+ * Internal dependencies.
+ */
+import './style.scss';
+import Field from '../field';
+
+class Container extends Component {
+	/**
+	 * Local state.
+	 *
+	 * @type {Object}
+	 */
+	state = {
+		currentTab: null
+	};
+
+	/**
+	 * Lifecycle hook.
+	 *
+	 * @return {void}
+	 */
+	componentDidMount() {
+		const { container } = this.props;
+
+		if ( this.isTabbed( container ) ) {
+			this.setState( {
+				currentTab: Object.keys( container.settings.tabs )[ 0 ]
+			} );
+		}
+	}
+
+	/**
+	 * Returns whether the container uses tabs.
+	 *
+	 * @param  {Object} container
+	 * @return {boolean}
+	 */
+	isTabbed( container ) {
+		return isPlainObject( container.settings.tabs );
+	}
+
+	/**
+	 * Renders the given field.
+	 *
+	 * @param  {Object} field
+	 * @return {Object}
+	 */
+	renderField = ( field ) => {
+		const FieldEdit = getFieldType( field.type, 'metabox' );
+
+		if ( ! FieldEdit ) {
+			return null;
+		}
+
+		return (
+			<Field key={ field.id } id={ field.id }>
+				<FieldEdit id={ field.id } containerId={ this.props.id } />
+			</Field>
+		);
+	}
+
+	/**
+	 * Handles click on the tabs.
+	 *
+	 * @param  {string} tab
+	 * @return {void}
+	 */
+	handleTabClick = ( tab ) => {
+		this.setState( {
+			currentTab: tab
+		} );
+	}
+
+	/**
+	 * Renders the component.
+	 *
+	 * @return {Object}
+	 */
+	render() {
+		const { currentTab } = this.state;
+		const { container } = this.props;
+
+		const hasTabs = this.isTabbed( container );
+
+		const classes = cx( [
+			'cf-container',
+			`cf-container-${ container.id }`,
+			`cf-container-${ kebabCase( container.type ) }`,
+			...container.classes,
+			{
+				'cf-container--plain': ! hasTabs,
+				[ `cf-container--tabbed cf-container--${ container.layout }` ]: hasTabs
+			}
+		] );
+
+		return (
+			<div className={ classes }>
+				<input
+					type="hidden"
+					name={ container.nonce.name }
+					value={ container.nonce.value }
+				/>
+
+				{ hasTabs && (
+					<div className={ `cf-container__tabs cf-container__tabs--${ container.layout }` }>
+						<ul className="cf-container__tabs-list">
+							{ map( container.settings.tabs, ( fieldNames, tabName ) => {
+								// eslint-disable-next-line no-shadow
+								const classes = cx(
+									'cf-container__tabs-item',
+									{
+										'cf-container__tabs-item--current': tabName === currentTab
+									}
+								);
+
+								return (
+									<li
+										key={ tabName }
+										className={ classes }
+										tabIndex={ -1 }
+										role="tab"
+										aria-selected={ currentTab === tabName }
+									>
+										<button
+											type="button"
+											onClick={ () => this.handleTabClick( tabName ) }
+											dangerouslySetInnerHTML={ { __html: tabName } }
+										/>
+									</li>
+								);
+							} ) }
+						</ul>
+					</div>
+				) }
+
+				{ hasTabs && (
+					map( container.settings.tabs, ( fieldNames, tabName ) => {
+						return (
+							<div className="cf-container__fields" key={ tabName } hidden={ tabName !== currentTab }>
+								{ map( fieldNames, ( fieldName ) => {
+									const field = find( container.fields, [ 'name', fieldName ] );
+
+									return this.renderField( field );
+								} ) }
+							</div>
+						);
+					} )
+				) }
+
+				{ ! hasTabs && (
+					<div className="cf-container__fields">
+						{ map( container.fields, this.renderField ) }
+					</div>
+				) }
+			</div>
+		);
+	}
+}
+
+export default Container;

web/vendor/htmlburger/carbon-fields/packages/metaboxes/components/container/style.scss

@@ -0,0 +1,146 @@
+/* ==========================================================================
+   Container
+   ========================================================================== */
+
+.carbon-box {
+	&.hide-if-js:not([hidden]) {
+		display: block;
+	}
+}
+
+#poststuff .carbon-box .inside,
+.carbon-box .inside {
+	padding: 0;
+	margin: 0;
+}
+
+.cf-container {
+	&--plain {
+		display: block;
+	}
+
+	&--tabbed {
+		display: flex;
+
+		&-horizontal {
+			flex-direction: column;
+		}
+
+		&-vertical {
+			flex-direction: row;
+		}
+	}
+}
+
+.cf-container__fields {
+	display: flex;
+	flex-wrap: wrap;
+	flex: 1;
+	margin: 0 -1px 0 0;
+	background-color: $color-white;
+
+	&[hidden] {
+		display: none;
+	}
+
+	.block-editor & {
+		border-left: 1px solid $wp-color-gray-light-500;
+	}
+
+	.cf-container-term-meta &,
+	.cf-container-user-meta & {
+		border-width: 0 0 1px 1px;
+		border-style: solid;
+		border-color: $wp-color-gray-light-500;
+		margin: 0;
+	}
+}
+
+.cf-container__tabs {
+	position: relative;
+	z-index: 1;
+	background-color: $wp-color-gray-light-100;
+
+	&-list {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 0 0 -1px;
+
+		.cf-container__tabs-item {
+			display: flex;
+			align-items: center;
+			border: 1px solid $wp-color-gray-light-500;
+			margin: 0 ($size-base * 2) 0 0;
+			background-color: $wp-color-gray-light-100;
+			font-size: 13px;
+			cursor: pointer;
+			transition: background-color $transition-base, border-color $transition-base;
+
+			button {
+				background: 0;
+				border: 0;
+				padding: ($size-base * 2.5) ($size-base * 3);
+				margin: 0;
+				flex: 1;
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+
+				span {
+					margin-right: 5px;
+				}
+			}
+
+			&:hover {
+				background-color: $color-white;
+			}
+
+			&--current {
+				background-color: $color-white;
+				border-bottom-color: $color-white;
+			}
+		}
+
+	}
+
+	&--tabbed-horizontal {
+		padding: ($size-base * 3) ($size-base * 3) 0;
+		border-bottom: 1px solid $wp-color-gray-light-500;
+
+		.cf-container__tabs-list {
+			display: flex;
+			flex-direction: row;
+		}
+	}
+
+	&--tabbed-vertical {
+		width: 300px;
+		border-right: 1px solid $wp-color-gray-light-500;
+
+		.cf-container__tabs-list {
+			display: flex;
+			flex-direction: column;
+
+			.cf-container__tabs-item {
+				margin: 0;
+				justify-content: flex-start;
+				border: 0;
+				border-top: 1px solid $gb-light-gray-500;
+				border-bottom: 1px solid $gb-light-gray-500;
+
+				&:first-of-type {
+					border-top: 0;
+				}
+
+				button {
+					text-align: left;
+					font-weight: 500;
+				}
+			}
+
+			.cf-container__tabs-item + .cf-container__tabs-item {
+				border-top: 0;
+			}
+		}
+	}
+}