smart-webcomponents
Version:
Web Components & Custom Elements for Professional Web Applications
553 lines (490 loc) • 15.7 kB
JSX
import React from "react";
import ReactDOM from 'react-dom/client';
import { RibbonTab } from './ribbontab';
import { RibbonGroup } from './ribbongroup';
import { RibbonItem } from './ribbonitem';
export { RibbonTab } from './ribbontab';
export { RibbonGroup } from './ribbongroup';
export { RibbonItem } from './ribbonitem';
/**
Ribbon is a navigation control that allows you to organize your application's commands in a tabbed interface.
*/
export class Ribbon extends React.Component {
// Gets the id of the React component.
get id() {
if (!this._id) {
this._id = 'Ribbon' + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return this._id;
}
/** Determines whether the ribbon is collapsible.
* Property type: any
*/
get collapsible() {
return this.nativeElement ? this.nativeElement.collapsible : undefined;
}
set collapsible(value) {
if (this.nativeElement) {
this.nativeElement.collapsible = value;
}
}
/** Determines the tab items of the ribbon.
* Property type: any
*/
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
if (this.nativeElement) {
this.nativeElement.dataSource = value;
}
}
/** Sets or gets the value indicating whether the element is disabled.
* Property type: boolean
*/
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
if (this.nativeElement) {
this.nativeElement.disabled = value;
}
}
/** Determines the file menu options of the ribbon.
* Property type: RibbonFileMenu
*/
get fileMenu() {
return this.nativeElement ? this.nativeElement.fileMenu : undefined;
}
set fileMenu(value) {
if (this.nativeElement) {
this.nativeElement.fileMenu = value;
}
}
/** Sets or gets the unlockKey which unlocks the product.
* Property type: string
*/
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
if (this.nativeElement) {
this.nativeElement.unlockKey = value;
}
}
/** Determines the locale of the ribbon.
* Property type: string
*/
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
if (this.nativeElement) {
this.nativeElement.locale = value;
}
}
/** Determines the messages of the ribbon
* Property type: any
*/
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
if (this.nativeElement) {
this.nativeElement.messages = value;
}
}
/** Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
* Property type: boolean
*/
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
if (this.nativeElement) {
this.nativeElement.rightToLeft = value;
}
}
/** Determines the selected tab.
* Property type: any
*/
get selectedTab() {
return this.nativeElement ? this.nativeElement.selectedTab : undefined;
}
set selectedTab(value) {
if (this.nativeElement) {
this.nativeElement.selectedTab = value;
}
}
// Gets the properties of the React component.
get properties() {
return ["collapsible","dataSource","disabled","fileMenu","unlockKey","locale","messages","rightToLeft","selectedTab"];
}
/** This event is triggered when the ribbon is collapsed.
* @param event. The custom event. */
_onCollapse = null; get onCollapse() {
return this._onCollapse;
}
set onCollapse(value) {
this._onCollapse = value;
}
/** This event is triggered when the ribbon is collapsing. The event can be canceled by calling event.preventDefault() in the event handler function.
* @param event. The custom event. */
_onCollapsing = null; get onCollapsing() {
return this._onCollapsing;
}
set onCollapsing(value) {
this._onCollapsing = value;
}
/** This event is triggered when the dialog launcher is clicked.
* @param event. The custom event. Custom event was created with: event.detail( groupLabel, groupId)
* groupLabel - The label of the dialog launcher's ribbon group.
* groupId - The id of the dialog launcher's ribbon group.
*/
_onDialogLauncherClick = null; get onDialogLauncherClick() {
return this._onDialogLauncherClick;
}
set onDialogLauncherClick(value) {
this._onDialogLauncherClick = value;
}
/** This event is triggered when the ribbon is expanded.
* @param event. The custom event. */
_onExpand = null; get onExpand() {
return this._onExpand;
}
set onExpand(value) {
this._onExpand = value;
}
/** This event is triggered when the ribbon is expanding. The event can be canceled by calling event.preventDefault() in the event handler function.
* @param event. The custom event. */
_onExpanding = null; get onExpanding() {
return this._onExpanding;
}
set onExpanding(value) {
this._onExpanding = value;
}
/** This event is triggered when the file menu button is clicked.
* @param event. The custom event. */
_onFileButtonClick = null; get onFileButtonClick() {
return this._onFileButtonClick;
}
set onFileButtonClick(value) {
this._onFileButtonClick = value;
}
/** This event is triggered when the file menu is opened.
* @param event. The custom event. */
_onFileMenuOpen = null; get onFileMenuOpen() {
return this._onFileMenuOpen;
}
set onFileMenuOpen(value) {
this._onFileMenuOpen = value;
}
/** This event is triggered when the file menu is closed.
* @param event. The custom event. */
_onFileMenuClose = null; get onFileMenuClose() {
return this._onFileMenuClose;
}
set onFileMenuClose(value) {
this._onFileMenuClose = value;
}
/** This event is triggered when a file menu item is clicked.
* @param event. The custom event. Custom event was created with: event.detail( item)
* item - The file menu item.
*/
_onFileMenuItemClick = null; get onFileMenuItemClick() {
return this._onFileMenuItemClick;
}
set onFileMenuItemClick(value) {
this._onFileMenuItemClick = value;
}
/** This event is triggered when the tab selection is changed.
* @param event. The custom event. Custom event was created with: event.detail( oldIndex, index)
* oldIndex - The previous tab index.
* index - The new index of the selected tab.
*/
_onSelect = null; get onSelect() {
return this._onSelect;
}
set onSelect(value) {
this._onSelect = value;
}
/** This event is triggered when the tab selection is changing. The event can be canceled by calling event.preventDefault() in the event handler function.
* @param event. The custom event. Custom event was created with: event.detail( oldIndex, index)
* oldIndex - The previous tab index.
* index - The new index of the selected tab.
*/
_onSelecting = null; get onSelecting() {
return this._onSelecting;
}
set onSelecting(value) {
this._onSelecting = value;
}
// Gets the events of the React component.
get eventListeners() {
return ["onCollapse","onCollapsing","onDialogLauncherClick","onExpand","onExpanding","onFileButtonClick","onFileMenuOpen","onFileMenuClose","onFileMenuItemClick","onSelect","onSelecting"];
}
/** Adds a new ribbon tab to the ribbon. The tab can be added as an object, HTMLElement or id to an HTMLElement.
* @param {any} tab. The ribbon tab to be added.
*/
addTab(tab){
if (this.nativeElement.isRendered) {
this.nativeElement.addTab(tab);
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.addTab(tab);
});
}
}
/** Adds a new group to a ribbon tab. The group can be added as an object, HTMLElement or id to an HTMLElement.
* @param {any} tab. The id, index or HTMLElement of the parent ribbon tab.
* @param {any} group. The ribbon group to be added.
*/
addGroup(tab, group){
if (this.nativeElement.isRendered) {
this.nativeElement.addGroup(tab, group);
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.addGroup(tab, group);
});
}
}
/** Adds a new ribbon item to a ribbon group. The item can be added as an object, HTMLElement or id to an HTMLElement.
* @param {string | number | HTMLElement} tab. The id, index or HTMLElement of the parent ribbon tab.
* @param {string | HTMLElement} group. The id or HTMLElement of the parent ribbon group.
* @param {any} item. The ribbon item to be added.
*/
addItem(tab, group, item){
if (this.nativeElement.isRendered) {
this.nativeElement.addItem(tab, group, item);
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.addItem(tab, group, item);
});
}
}
/** Collapses the ribbon.
*/
collapse(){
if (this.nativeElement.isRendered) {
this.nativeElement.collapse();
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.collapse();
});
}
}
/** Expands the ribbon.
*/
expand(){
if (this.nativeElement.isRendered) {
this.nativeElement.expand();
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.expand();
});
}
}
/** Removes a ribbon tab from the ribbon.
* @param {string | number} ribbonTab. The id or index of the ribbon tab to be removed.
*/
removeTab(ribbonTab){
if (this.nativeElement.isRendered) {
this.nativeElement.removeTab(ribbonTab);
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.removeTab(ribbonTab);
});
}
}
/** Removes a ribbon group from a ribbon tab.
* @param {string | number} ribbonTabIndex?. The id or index of the parent ribbon tab.
* @param {string | number} ribbonGroup?. The id or index of the ribbon group to be removed.
*/
removeGroup(ribbonTabIndex, ribbonGroup){
if (this.nativeElement.isRendered) {
this.nativeElement.removeGroup(ribbonTabIndex, ribbonGroup);
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.removeGroup(ribbonTabIndex, ribbonGroup);
});
}
}
/** Removes a ribbon item from a ribbon group.
* @param {string | number} ribbonTabIndex?. The id or index of the parent ribbon tab.
* @param {string | number} ribbonGroup?. The id or index of the parent ribbon group.
* @param {string | number} ribbonItem?. The id or index of the ribbon item to be removed.
*/
removeItem(ribbonTabIndex, ribbonGroup, ribbonItem){
if (this.nativeElement.isRendered) {
this.nativeElement.removeItem(ribbonTabIndex, ribbonGroup, ribbonItem);
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.removeItem(ribbonTabIndex, ribbonGroup, ribbonItem);
});
}
}
/** Selects a ribbon tab.
* @param {string | number} ribbonTabIndex. The index of the ribbon tab to be selected.
*/
selectTab(ribbonTabIndex){
if (this.nativeElement.isRendered) {
this.nativeElement.selectTab(ribbonTabIndex);
}
else
{
this.nativeElement.whenRendered(() => {
this.nativeElement.selectTab(ribbonTabIndex);
});
}
}
constructor(props) {
super(props);
this.componentRef = React.createRef();
}
componentDidRender(initialize) {
const that = this;
const props = {};
const events = {};
let styles = null;
const stringifyCircularJSON = obj => {
const seen = new WeakSet();
return JSON.stringify(obj, (k, v) => {
if (v !== null && typeof v === 'object') {
if (seen.has(v)) return;
seen.add(v);
}
if (k === 'Smart') {
return v;
}
return v;
});
};
for(let prop in that.props) {
if (prop === 'children') {
continue;
}
if (prop === 'style') {
styles = that.props[prop];
continue;
}
if (prop.startsWith('on') && that.properties.indexOf(prop) === -1) {
events[prop] = that.props[prop];
continue;
}
props[prop] = that.props[prop];
}
if (initialize) {
that.nativeElement = this.componentRef.current;
that.nativeElement.React = React;
that.nativeElement.ReactDOM = ReactDOM;
if (that.nativeElement && !that.nativeElement.isCompleted) {
that.nativeElement.reactStateProps = JSON.parse(stringifyCircularJSON(props));
}
}
if (initialize && that.nativeElement && that.nativeElement.isCompleted) {
// return;
}
for(let prop in props) {
if (prop === 'class' || prop === 'className') {
const classNames = props[prop].trim().split(' ');
if (that.nativeElement._classNames) {
const oldClassNames = that.nativeElement._classNames;
for(let className in oldClassNames) {
if (that.nativeElement.classList.contains(oldClassNames[className]) && oldClassNames[className] !== "") {
that.nativeElement.classList.remove(oldClassNames[className]);
}
}
}
that.nativeElement._classNames = classNames;
for(let className in classNames) {
if (!that.nativeElement.classList.contains(classNames[className]) && classNames[className] !== "") {
that.nativeElement.classList.add(classNames[className]);
}
}
continue;
}
if (props[prop] !== that.nativeElement[prop]) {
const normalizeProp = (str) => {
return str.replace(/-([a-z])/g, function (g) {
return g[1].toUpperCase();
});
}
if (prop === 'hover' || prop === 'active' || prop === 'focus' || prop === 'selected') {
that.nativeElement.setAttribute(prop, '');
}
const normalizedProp = normalizeProp(prop);
if (that.nativeElement[normalizedProp] === undefined) {
that.nativeElement.setAttribute(prop, props[prop]);
}
if (props[prop] !== undefined) {
if (typeof props[prop] === 'object' && that.nativeElement.reactStateProps && !initialize) {
if (stringifyCircularJSON(props[prop]) === stringifyCircularJSON(that.nativeElement.reactStateProps[normalizedProp])) {
continue;
}
}
that.nativeElement[normalizedProp] = props[prop];
}
}
}
for(let eventName in events) {
that[eventName] = events[eventName];
that.nativeElement[eventName.toLowerCase()] = events[eventName];
}
if (initialize) {
Smart.Render();
if (that.onCreate) {
that.onCreate();
}
that.nativeElement.whenRendered(() => {
if (that.onReady) {
that.onReady();
}
});
}
// setup styles.
if (styles) {
for(let styleName in styles) {
that.nativeElement.style[styleName] = styles[styleName];
}
}
}
componentDidMount() {
this.componentDidRender(true);
}
componentDidUpdate() {
this.componentDidRender(false);
}
componentWillUnmount() {
const that = this;
if (!that.nativeElement) {
return;
}
that.nativeElement.whenRenderedCallbacks = [];
for(let i = 0; i < that.eventListeners.length; i++){
const eventName = that.eventListeners[i];
that.nativeElement.removeEventListener(eventName.substring(2).toLowerCase(), that[eventName]);
}
}
render() {
return (
React.createElement("smart-ribbon", { ref: this.componentRef, suppressHydrationWarning: true }, this.props.children)
)
}
}
export default Ribbon;