-
Notifications
You must be signed in to change notification settings - Fork 96
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
API Add a trait to bootstrap ViewableData into react component
- Loading branch information
Maxime Rainville
committed
Mar 4, 2021
1 parent
036bc9e
commit 1628428
Showing
10 changed files
with
261 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import classnames from 'classnames'; | ||
|
||
const CmsSiteName = ({ title, baseHref }) => ( | ||
<div className="cms-sitename"> | ||
<a href="#" className="cms-sitename__link font-icon-silverstripe font-icon-large" target="_blank"> | ||
</a> | ||
<a className="cms-sitename__title" href={baseHref} target="_blank">{title}</a> | ||
</div> | ||
); | ||
|
||
CmsSiteName.propTypes = { | ||
title: PropTypes.string, | ||
baseHref: PropTypes.string, | ||
}; | ||
|
||
CmsSiteName.defaultProps = { | ||
}; | ||
|
||
export default CmsSiteName; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
/* global ss */ | ||
import jQuery from 'jquery'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import { loadComponent } from 'lib/Injector'; | ||
|
||
jQuery.entwine('ss', ($) => { | ||
$('.js-injector-boot .bootstrap-component').entwine({ | ||
|
||
Component: null, | ||
|
||
onmatch() { | ||
const cmsContent = this.closest('.cms-content').attr('id'); | ||
const context = (cmsContent) | ||
? { context: cmsContent } | ||
: {}; | ||
|
||
const componentName = this.data('component'); | ||
const Component = loadComponent(componentName, context); | ||
|
||
this.setComponent(Component); | ||
this._super(); | ||
this.refresh(); | ||
}, | ||
|
||
refresh() { | ||
const props = this.getProps(); | ||
const Component = this.getComponent(); | ||
ReactDOM.render(<Component {...props} />, this[0]); | ||
}, | ||
|
||
/** | ||
* Find the selected node and get attributes associated to attach the data to the form | ||
* | ||
* @returns {Object} | ||
*/ | ||
getProps() { | ||
return $(this).data('props') || {}; | ||
}, | ||
|
||
/** | ||
* Remove the component when unmatching | ||
*/ | ||
onunmatch() { | ||
ReactDOM.unmountComponentAtNode(this[0]); | ||
}, | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,152 @@ | ||
<?php | ||
|
||
namespace SilverStripe\Admin\React; | ||
|
||
use SilverStripe\Core\Convert; | ||
|
||
trait BootstrapComponent | ||
{ | ||
|
||
private static $casting = [ | ||
'AttributesHTML' => 'HTMLFragment' | ||
]; | ||
|
||
private $attributes = []; | ||
|
||
protected $extraClasses = []; | ||
|
||
public function forTemplate() | ||
{ | ||
$return = $this->renderWith($this->getTemplates()); | ||
return $return; | ||
} | ||
|
||
public function getTemplates(): array | ||
{ | ||
return [self::class, 'SilverStripe\\Admin\\React\\BootstrapComponent']; | ||
} | ||
|
||
public function getAttributesHTML($attrs = null) | ||
{ | ||
$exclude = (is_string($attrs)) ? func_get_args() : null; | ||
|
||
$attrs = $this->getAttributes(); | ||
|
||
// Remove empty | ||
$attrs = array_filter((array)$attrs, function ($value) { | ||
return ($value || $value === 0); | ||
}); | ||
|
||
// Remove excluded | ||
if ($exclude) { | ||
$attrs = array_diff_key($attrs, array_flip($exclude)); | ||
} | ||
|
||
// Prepare HTML-friendly 'method' attribute (lower-case) | ||
if (isset($attrs['method'])) { | ||
$attrs['method'] = strtolower($attrs['method']); | ||
} | ||
|
||
// Create markup | ||
$parts = []; | ||
foreach ($attrs as $name => $value) { | ||
if ($value === true) { | ||
$value = $name; | ||
} | ||
|
||
$parts[] = sprintf('%s="%s"', Convert::raw2att($name), Convert::raw2att($value)); | ||
} | ||
|
||
return implode(' ', $parts); | ||
} | ||
|
||
/** | ||
* @param string $name | ||
* @param string $value | ||
* @return $this | ||
*/ | ||
public function setAttribute($name, $value) | ||
{ | ||
$this->attributes[$name] = $value; | ||
return $this; | ||
} | ||
|
||
/** | ||
* @param string $name | ||
* @return string | ||
*/ | ||
public function getAttribute($name) | ||
{ | ||
if (isset($this->attributes[$name])) { | ||
return $this->attributes[$name]; | ||
} | ||
return null; | ||
} | ||
|
||
/** | ||
* @return array | ||
*/ | ||
public function getAttributes() | ||
{ | ||
$attrs = [ | ||
'class' => $this->extraClass(), | ||
'data-component' => $this->getComponent(), | ||
'data-props' => json_encode($this->getProps()), | ||
]; | ||
|
||
$attrs = array_merge($attrs, $this->attributes); | ||
|
||
return $attrs; | ||
} | ||
|
||
/** | ||
* Compiles all CSS-classes. | ||
* | ||
* @return string | ||
*/ | ||
public function extraClass() | ||
{ | ||
return 'bootstrap-component ' . implode(' ', array_unique($this->extraClasses)); | ||
} | ||
|
||
/** | ||
* Add a CSS-class to the form-container. If needed, multiple classes can | ||
* be added by delimiting a string with spaces. | ||
* | ||
* @param string $class A string containing a classname or several class | ||
* names delimited by a single space. | ||
* @return $this | ||
*/ | ||
public function addExtraClass($class) | ||
{ | ||
//split at white space | ||
$classes = preg_split('/\s+/', $class); | ||
foreach ($classes as $class) { | ||
//add classes one by one | ||
$this->extraClasses[$class] = $class; | ||
} | ||
return $this; | ||
} | ||
|
||
/** | ||
* Remove a CSS-class from the form-container. Multiple class names can | ||
* be passed through as a space delimited string | ||
* | ||
* @param string $class | ||
* @return $this | ||
*/ | ||
public function removeExtraClass($class) | ||
{ | ||
//split at white space | ||
$classes = preg_split('/\s+/', $class); | ||
foreach ($classes as $class) { | ||
//unset one by one | ||
unset($this->extraClasses[$class]); | ||
} | ||
return $this; | ||
} | ||
|
||
abstract public function getProps(): array; | ||
|
||
abstract public function getComponent(): string; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<?php | ||
namespace SilverStripe\Admin\React; | ||
|
||
use SilverStripe\Admin\LeftAndMain; | ||
use SilverStripe\Control\Director; | ||
use SilverStripe\SiteConfig\SiteConfig; | ||
use SilverStripe\View\ViewableData; | ||
|
||
|
||
class SiteName extends ViewableData | ||
{ | ||
use BootstrapComponent; | ||
|
||
public function getProps(): array | ||
{ | ||
$config = SiteConfig::current_site_config(); | ||
return [ | ||
'title' => $config->Title ?? LeftAndMain::config()->get('application_name'), | ||
'baseHref' => Director::absoluteBaseURL() | ||
]; | ||
} | ||
|
||
public function getComponent(): string | ||
{ | ||
return 'CmsSiteName'; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 0 additions & 5 deletions
5
templates/SilverStripe/Admin/Includes/LeftAndMain_MenuLogo.ss
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<div $AttributesHTML></div> |