smart-webcomponents-react
Version:
[](https://jqwidgets.com/license/)
339 lines (332 loc) • 15.4 kB
JavaScript
require('../source/modules/smart.chip');
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom/client')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom/client'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.chip = {}, global.React, global.ReactDOM));
})(this, (function (exports, React, ReactDOM) { 'use strict';
exports.Smart = void 0;
if (typeof window !== "undefined") {
exports.Smart = window.Smart;
}
/**
Chip is a simple rounded box that displays a single value and optionally an icon.
*/
class Chip extends React.Component {
// Gets the id of the React component.
get id() {
if (!this._id) {
this._id = 'Chip' + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return this._id;
}
/** Configures or retrieves the current animation mode for the component. When this property is set to 'none', all animations are disabled, resulting in immediate transitions without animation effects. For other values, the specified animation behavior is applied during state changes or interactions.
* Property type: Animation | string
*/
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
if (this.nativeElement) {
this.nativeElement.animation = value;
}
}
/** Specifies a custom avatar displayed on the left side of the chip. The avatar can be an image (when provided as an image URL), plain text, or custom HTML content. This allows for flexible customization, enabling you to use user profile pictures, initials, icons, or any other visual elements as the chip’s avatar.
* Property type: string | null
*/
get avatar() {
return this.nativeElement ? this.nativeElement.avatar : undefined;
}
set avatar(value) {
if (this.nativeElement) {
this.nativeElement.avatar = value;
}
}
/** Specifies whether a close button should be visible on the right side of the element, allowing users to dismiss or remove the element when clicked.
* Property type: boolean
*/
get closeButton() {
return this.nativeElement ? this.nativeElement.closeButton : undefined;
}
set closeButton(value) {
if (this.nativeElement) {
this.nativeElement.closeButton = value;
}
}
/** Determines whether the element is interactive. When set to true, the element is disabled, meaning users cannot interact with it (e.g., clicking, typing, or selecting). Disabled elements are typically visually distinct and do not respond to user actions or participate in form submissions.
* Property type: boolean
*/
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
if (this.nativeElement) {
this.nativeElement.disabled = value;
}
}
/** Specifies a custom template for the chip component. The template can be provided either as a string representing the ID of an existing '<template>' element in the DOM, or as a direct reference to an 'HTMLTemplateElement' instance. This allows developers to define and reuse custom chip layouts within the application.
* Property type: any
*/
get itemTemplate() {
return this.nativeElement ? this.nativeElement.itemTemplate : undefined;
}
set itemTemplate(value) {
if (this.nativeElement) {
this.nativeElement.itemTemplate = value;
}
}
/** Sets or retrieves the unlockKey, a unique identifier or code used to activate and grant access to the product's features.
* Property type: string
*/
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
if (this.nativeElement) {
this.nativeElement.unlockKey = value;
}
}
/** Specifies or retrieves the current language setting. This property works together with the messages property to determine which set of localized messages is displayed based on the selected language. Use this to change the application's language and ensure the appropriate message translations are shown.
* Property type: string
*/
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
if (this.nativeElement) {
this.nativeElement.locale = value;
}
}
/** A callback function that allows you to define a custom format for the messages returned by the Localization Module. This function enables you to modify or transform localized messages before they are displayed to users, such as adjusting placeholders, formatting variables, or applying additional string manipulation as needed.
* Property type: any
*/
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
if (this.nativeElement) {
this.nativeElement.localizeFormatFunction = value;
}
}
/** Defines or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages or regions. This property works in conjunction with locale to support localization, enabling the widget’s interface to adapt its text content based on the specified locale settings.
* Property type: any
*/
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
if (this.nativeElement) {
this.nativeElement.messages = value;
}
}
/** When the element has the readonly attribute, users can view its value but cannot modify or interact with it. The element’s content cannot be changed by user input, though the element may still be focused and its value programmatically updated by scripts.
* Property type: boolean
*/
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
if (this.nativeElement) {
this.nativeElement.readonly = value;
}
}
/** Gets or sets a value that determines whether the element's alignment is configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content and layout adapt to support locales that require right-to-left text direction.
* Property type: boolean
*/
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
if (this.nativeElement) {
this.nativeElement.rightToLeft = value;
}
}
/** Specifies the theme to be applied to the element. The theme controls the visual appearance and styling, including colors, fonts, and other design aspects, ensuring a consistent look and feel across the interface.
* Property type: string
*/
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
if (this.nativeElement) {
this.nativeElement.theme = value;
}
}
/** When this property is set to true, the element will be excluded from keyboard navigation and cannot receive focus via mouse or keyboard interactions.
* Property type: boolean
*/
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
if (this.nativeElement) {
this.nativeElement.unfocusable = value;
}
}
/** Specifies the text displayed within the chip component. This text serves as the chip's value and is used for display and identification purposes. The value must be a string; any other data type will not be accepted. If no value is provided, the chip's text content defaults to an empty string.
* Property type: string
*/
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
if (this.nativeElement) {
this.nativeElement.value = value;
}
}
// Gets the properties of the React component.
get properties() {
return ["animation", "avatar", "closeButton", "disabled", "itemTemplate", "unlockKey", "locale", "localizeFormatFunction", "messages", "readonly", "rightToLeft", "theme", "unfocusable", "value"];
}
// Gets the events of the React component.
get eventListeners() {
return ["onClose", "onCreate", "onReady"];
}
/** Removes the chip element from the DOM, effectively dismissing it from the interface and making it no longer visible or interactive to the user. This action is typically triggered when the user clicks the close or delete icon on the chip.
*/
close() {
if (this.nativeElement.isRendered) {
this.nativeElement.close();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.close();
});
}
}
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) {
exports.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-chip", { ref: this.componentRef, suppressHydrationWarning: true }, this.props.children));
}
}
exports.Chip = Chip;
exports.default = Chip;
Object.defineProperty(exports, '__esModule', { value: true });
}));