commit for release v0.6.0

esm/constant/Message.js

@@ -15,7 +15,7 @@ var Message = {
     tabs: {
         MISSING_TAB_NAME: 'Missing tab name on tab item[{{index}}]',
         MISSING_NEW_ITEM_TABNAME: 'Missing tab name.',
-        INVALID_ACTION: "Behavior invalid",
+        INVALID_ACTION: 'Behavior invalid',
     },
     datetime: {
         INVALID_DATE: 'Invalid date',

esm/js/Dropdown/index.js

@@ -57,7 +57,7 @@ var Dropdown = /** @class */ (function (_super) {
         var position = -6;
         var currentPosition = this.listOuterEl.offsetTop + this.listOuterEl.offsetHeight;
         if (currentPosition >= window.innerHeight) {
-            position = position - (this.listOuterEl.offsetHeight + this.element.offsetHeight);
+            position -= (this.listOuterEl.offsetHeight + this.element.offsetHeight);
         }
         return position;
     };

esm/js/Table/TableCellFactory.js

@@ -110,12 +110,12 @@ var createTableCell = function (type, fieldName, props) {
     var update = function (_a) {
         var rowData = _a.rowData;
         var cellData = rowData[fieldName] || {};
-        if (cellData && field.setValue) {
-            field.setValue(cellData.value);
-        }
         if (cellData && field.setItems) {
             field.setItems(cellData.items);
         }
+        if (cellData && field.setValue) {
+            field.setValue(cellData.value);
+        }
         if (cellData && field.setText) {
             field.setText(cellData.text);
         }

esm/js/Text/index.d.ts

@@ -3,6 +3,7 @@ import Control, { ControlProps } from '../Control';
 import '../../css/Text.css';
 declare type TextProps = ControlProps & {
     value?: string;
+    placeholder?: string;
 };
 declare class Text extends Control<TextProps> {
     private _onChange;
@@ -12,5 +13,7 @@ declare class Text extends Control<TextProps> {
     on(eventName: string, callback: (params?: any) => void): void;
     setValue(value: string): void;
     getValue(): string | undefined;
+    setPlaceholder(placeholder: string): void;
+    getPlaceholder(): string | undefined;
 }
 export default Text;

esm/js/Text/index.js

@@ -1,13 +1,15 @@
 import * as tslib_1 from "tslib";
 import '../polyfill';
 import Control from '../Control';
+import Message from '../../constant/Message';
 import '../../css/Text.css';
 var Text = /** @class */ (function (_super) {
     tslib_1.__extends(Text, _super);
     function Text(params) {
         var _this = _super.call(this) || this;
         _this._onChange = function () { };
         _this._props.value = '';
+        _this._props.placeholder = '';
         if (typeof params === 'object' && params !== null && typeof params.isDisabled !== 'boolean') {
             delete params.isDisabled;
         }
@@ -18,7 +20,8 @@ var Text = /** @class */ (function (_super) {
         _this.element.className = 'kuc-input-text';
         _this.element.setAttribute('type', 'text');
         // If this._props.value is 0, we handle it as string.
-        _this.element.value = (_this._props.value == null || _this._props.value == undefined) ? '' : _this._props.value;
+        _this.element.value = (_this._props.value === null || _this._props.value === undefined) ? '' : _this._props.value;
+        _this.element.placeholder = (_this._props.placeholder === null || _this._props.placeholder === undefined) ? '' : _this._props.placeholder;
         _this.element.onchange = function (e) {
             _this._props.value = e.target.value;
             _this._onChange(e);
@@ -43,6 +46,10 @@ var Text = /** @class */ (function (_super) {
             // If this._props.value is 0, we handle it as string.
             this.element.value = (this._props.value === null || this._props.value === undefined) ? '' : this._props.value;
         }
+        if (changedAttr.indexOf('placeholder') !== -1) {
+            // If this._props.placeholder is 0, we handle it as string.
+            this.element.placeholder = (this._props.placeholder === null || this._props.placeholder === undefined) ? '' : this._props.placeholder;
+        }
     };
     Text.prototype.on = function (eventName, callback) {
         var _this = this;
@@ -63,6 +70,15 @@ var Text = /** @class */ (function (_super) {
     Text.prototype.getValue = function () {
         return this._props.value;
     };
+    Text.prototype.setPlaceholder = function (placeholder) {
+        if (!placeholder)
+            throw new Error(Message.common.INVALID_ARGUMENT);
+        this._props.placeholder = placeholder;
+        this.rerender(['placeholder']);
+    };
+    Text.prototype.getPlaceholder = function () {
+        return this._props.placeholder;
+    };
     return Text;
 }(Control));
 export default Text;

esm/js/TextArea/index.d.ts

@@ -3,6 +3,7 @@ import Control, { ControlProps } from '../Control';
 import '../../css/TextArea.css';
 declare type TextAreaProps = ControlProps & {
     value?: string;
+    placeholder?: string;
     onClick?: (e: Event) => void;
     onChange?: (value: string | null) => void;
 };
@@ -23,6 +24,8 @@ declare class TextArea extends Control<TextAreaProps> {
     rerender(changedAttr?: string[]): void;
     setValue(text: string): void;
     getValue(): string | undefined;
+    setPlaceholder(placeholder: string): void;
+    getPlaceholder(): string | undefined;
     _onMouseDown(): void;
     private createContainerEL;
     private createTextareaEL;

esm/js/TextArea/index.js

@@ -1,6 +1,7 @@
 import * as tslib_1 from "tslib";
 import '../polyfill';
 import Control from '../Control';
+import Message from '../../constant/Message';
 import '../../css/TextArea.css';
 var TextArea = /** @class */ (function (_super) {
     tslib_1.__extends(TextArea, _super);
@@ -16,6 +17,9 @@ var TextArea = /** @class */ (function (_super) {
         _this.currentY = null;
         _this.translateX = 0;
         _this.translateY = 0;
+        _this._props = tslib_1.__assign({}, _this._props, {
+            placeholder: ''
+        });
         if (params) {
             _this._props = tslib_1.__assign({}, _this._props, params);
         }
@@ -30,6 +34,9 @@ var TextArea = /** @class */ (function (_super) {
         if (changedAttr.indexOf('value') !== -1) {
             this.textAreaEl.value = this._props.value || '';
         }
+        if (changedAttr.indexOf('placeholder') !== -1) {
+            this.textAreaEl.placeholder = this._props.placeholder || '';
+        }
         if (changedAttr.indexOf('isDisabled') !== -1) {
             if (this._props.isDisabled) {
                 this.textAreaEl.setAttribute('disabled', "" + this._props.isDisabled);
@@ -46,6 +53,15 @@ var TextArea = /** @class */ (function (_super) {
     TextArea.prototype.getValue = function () {
         return this._props.value;
     };
+    TextArea.prototype.setPlaceholder = function (placeholder) {
+        if (!placeholder)
+            throw new Error(Message.common.INVALID_ARGUMENT);
+        this._props.placeholder = placeholder;
+        this.rerender(['placeholder']);
+    };
+    TextArea.prototype.getPlaceholder = function () {
+        return this._props.placeholder;
+    };
     TextArea.prototype._onMouseDown = function () {
         var _this = this;
         if (this._props.isDisabled)

esm/react/Attachment/index.js

@@ -108,7 +108,7 @@ var Attachment = function (props) {
                             dropZoneElement = dropElement;
                     } }, props.dropZoneText || 'Drop files here.')),
             React.createElement("div", { className: "kuc-attachment-file-filelist kuc-attachment-file-filelist-list" }, Array.isArray(props.files) && props.files.map(function (file, index) { return (React.createElement(AttachmentFileItem, { key: index, index: index, fileName: file.name, fileSize: file.size, onFileRemove: _removeFile })); })),
-            React.createElement("a", { className: "kuc-attachment-file-upload-button", tabIndex: -1 },
+            React.createElement("span", { className: "kuc-attachment-file-upload-button", tabIndex: -1 },
                 React.createElement("span", { className: "kuc-attachment-file-upload-button-text" },
                     " ",
                     props.browseButtonText || 'Browse'),

esm/react/ColorPicker/components/HueSpectrum.js

@@ -5,7 +5,9 @@ export default function HueSpectrum(props) {
     var _a = useState(false), hasInitLayout = _a[0], setHasInitLayout = _a[1];
     var _b = useState(false), isMouseDown = _b[0], setIsMouseDown = _b[1];
     var _c = useState(), containerEl = _c[0], setContainerEl = _c[1];
-    var container = useCallback(function (element) { setContainerEl(element.getBoundingClientRect()); }, []);
+    var container = useCallback(function (element) {
+        setContainerEl(element.getBoundingClientRect());
+    }, []);
     var hueCanvas = useRef(null);
     function initLayout() {
         if (!hasInitLayout && hueCanvas && hueCanvas.current) {

esm/react/ColorPicker/components/SaturationSpectrum.js

@@ -4,7 +4,9 @@ export default function SaturationSpectrum(props) {
     var h = props.height;
     var _a = useState(false), isMouseDown = _a[0], setIsMouseDown = _a[1];
     var _b = useState(), containerEl = _b[0], setContainerEl = _b[1];
-    var container = useCallback(function (element) { setContainerEl(element.getBoundingClientRect()); }, []);
+    var container = useCallback(function (element) {
+        setContainerEl(element.getBoundingClientRect());
+    }, []);
     var satCanvas = useRef(null);
     function fillSatSpectrumCanvas() {
         if (satCanvas && satCanvas.current) {

esm/react/DateTime/components/utils.js

@@ -86,7 +86,7 @@ var parseStringToDate = function (dateString, dateFormat) {
         if (day > 0) {
             date.setDate(day);
         }
-        if (date.toDateString() === "Invalid Date" || month < 0 || year < 1) {
+        if (date.toDateString() === 'Invalid Date' || month < 0 || year < 1) {
             return null;
         }
         return date;

esm/react/DateTime/index.js

@@ -137,18 +137,15 @@ var DateTime = function (_a) {
             if (!hasSelection) {
                 setInputValue('');
             }
-            else {
-                // validate dateformat
-                if (inputValue !== dateFormat) {
-                    var newInputValue = format(value, dateFormat);
-                    if (newInputValue === dateFormat) {
-                        setInputValue(dateFormat);
-                        setDateError(Message.datetime.INVALID_DATE);
-                        setShowPickerError(true);
-                    }
-                    else if (!showPickerError) {
-                        setInputValue(newInputValue);
-                    }
+            else if (inputValue !== dateFormat) {
+                var newInputValue = format(value, dateFormat);
+                if (newInputValue === dateFormat) {
+                    setInputValue(dateFormat);
+                    setDateError(Message.datetime.INVALID_DATE);
+                    setShowPickerError(true);
+                }
+                else if (!showPickerError) {
+                    setInputValue(newInputValue);
                 }
             }
             if (typeof isDisabled !== 'boolean') {

esm/react/Dropdown/index.js

@@ -12,15 +12,15 @@ var Dropdown = function (_a) {
     var _caclListOuterPosition = function (listItemEl) {
         var position = -6;
         var currentPosition = listItemEl.offsetTop + listItemEl.offsetHeight;
-        var parentEl = ref.current || document.createElement("div");
+        var parentEl = ref.current || document.createElement('div');
         if (currentPosition >= window.innerHeight) {
-            position = position - (listItemEl.offsetHeight + parentEl.offsetHeight);
+            position -= (listItemEl.offsetHeight + parentEl.offsetHeight);
         }
         return position;
     };
     var _showItems = function (e) {
         setVisibleItems(!isVisibleItems);
-        var element = ref.current || document.createElement("div");
+        var element = ref.current || document.createElement('div');
         var listItemEl = element.getElementsByClassName('kuc-list-outer')[0];
         listItemEl.setAttribute('style', "display: block;");
         listItemEl.setAttribute('style', "margin-top: " + _caclListOuterPosition(listItemEl) + "px;");

esm/react/Tabs/index.js

@@ -1,30 +1,36 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import '../../css/font.css';
 import '../../css/Tabs.css';
 import Message from '../../constant/Message';
 var Tabs = function (_a) {
     var items = _a.items, value = _a.value, onClickTabItem = _a.onClickTabItem;
+    var _b = useState(value), defaultValue = _b[0], setDefaultValue = _b[1];
     var _onClickTabItem = function (tabIndex) {
         onClickTabItem && onClickTabItem(tabIndex);
     };
-    if (value) {
-        if (typeof value !== 'number') {
+    if (defaultValue) {
+        if (typeof defaultValue !== 'number') {
             throw new Error(Message.common.INVALID_ARGUMENT);
         }
-        if (!items || value > items.length - 1 || value < 0) {
+        if (!items || defaultValue > items.length - 1 || defaultValue < 0) {
             throw new Error(Message.common.INVALID_ARGUMENT);
         }
     }
-    else if (!value && items && items.length > 0) {
-        value = 0;
-    }
+    useEffect(function () {
+        setDefaultValue(value);
+    }, [value]);
+    useEffect(function () {
+        if (!defaultValue && items && items.length > 0) {
+            setDefaultValue(0);
+        }
+    }, [defaultValue, items]);
     var tabNames = (React.createElement("ul", { className: "kuc-tabs-tab-list" }, items &&
         items.map(function (item, tabIndex) {
             if (!item.tabName) {
                 throw new Error(Message.tabs.MISSING_TAB_NAME.replace('{{index}}', tabIndex.toString()));
             }
             var className = 'kuc-tabs-container';
-            if (value === tabIndex) {
+            if (defaultValue === tabIndex) {
                 className += ' kuc-tabs-container-selection';
                 if (item.isDisabled) {
                     throw new Error(Message.tabs.INVALID_ACTION);
@@ -36,12 +42,13 @@ var Tabs = function (_a) {
             }
             return (React.createElement("li", { role: "none", className: className, key: tabIndex, onClick: function () { return _onClickTabItem(tabIndex); }, onKeyUp: function () { return _onClickTabItem(tabIndex); } }, item.tabName));
         })));
-    var tabContents = items && items.map(function (item, tabIndex) {
-        if (tabIndex !== value)
-            return undefined;
-        return (React.createElement("div", { className: "kuc-tabs-tab-contents", key: tabIndex },
-            React.createElement("div", null, item.tabContent)));
-    });
+    var tabContents = items &&
+        items.map(function (item, tabIndex) {
+            if (tabIndex !== defaultValue)
+                return undefined;
+            return (React.createElement("div", { className: "kuc-tabs-tab-contents", key: tabIndex },
+                React.createElement("div", null, item.tabContent)));
+        });
     return (React.createElement("div", { className: "kuc-tabs-tabs" },
         tabNames,
         tabContents));

esm/react/Text/index.d.ts

@@ -5,8 +5,9 @@ declare type TextProps = {
     value?: string;
     isDisabled?: boolean;
     isVisible?: boolean;
+    placeholder?: string;
     onChange?: (value: string | null) => void;
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 };
-declare const Text: ({ value, isDisabled, isVisible, onChange, onClick }: TextProps) => JSX.Element | null;
+declare const Text: ({ value, isDisabled, isVisible, placeholder, onChange, onClick }: TextProps) => JSX.Element | null;
 export default Text;

esm/react/Text/index.js

@@ -2,13 +2,13 @@ import React from 'react';
 import '../../css/font.css';
 import '../../css/Text.css';
 var Text = function (_a) {
-    var value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.isVisible, isVisible = _c === void 0 ? true : _c, onChange = _a.onChange, onClick = _a.onClick;
+    var value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = _a.isVisible, isVisible = _c === void 0 ? true : _c, _d = _a.placeholder, placeholder = _d === void 0 ? '' : _d, onChange = _a.onChange, onClick = _a.onClick;
     var _onChange = function (event) {
         onChange && onChange(event.target.value);
     };
     if (isVisible === false) {
         return null;
     }
-    return (React.createElement("input", { type: "text", value: value, className: "kuc-input-text", onClick: onClick, onChange: _onChange, disabled: isDisabled }));
+    return (React.createElement("input", { type: "text", value: value, placeholder: placeholder, className: "kuc-input-text", onClick: onClick, onChange: _onChange, disabled: isDisabled }));
 };
 export default Text;

esm/react/TextArea/index.d.ts

@@ -3,10 +3,11 @@ import '../../css/font.css';
 import '../../css/TextArea.css';
 declare type TextAreaProps = {
     value?: string;
+    placeholder?: string;
     isVisible?: boolean;
     isDisabled?: boolean;
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
     onChange?: (value: string | null) => void;
 };
-declare const TextArea: ({ value, isVisible, isDisabled, onChange, onClick }: TextAreaProps) => JSX.Element | null;
+declare const TextArea: ({ value, placeholder, isVisible, isDisabled, onChange, onClick }: TextAreaProps) => JSX.Element | null;
 export default TextArea;

esm/react/TextArea/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import '../../css/font.css';
 import '../../css/TextArea.css';
 var TextArea = function (_a) {
-    var value = _a.value, isVisible = _a.isVisible, isDisabled = _a.isDisabled, onChange = _a.onChange, onClick = _a.onClick;
+    var value = _a.value, placeholder = _a.placeholder, isVisible = _a.isVisible, isDisabled = _a.isDisabled, onChange = _a.onChange, onClick = _a.onClick;
     var mixTextAreaWidth = 297;
     var mixtTextAreaHeight = 123;
     var _b = useState({ translateX: 0, translateY: 0, textAreaWidth: mixTextAreaWidth, textAreaHeight: mixtTextAreaHeight }), sizeConfig = _b[0], setSizeConfig = _b[1];
@@ -46,7 +46,7 @@ var TextArea = function (_a) {
         return null;
     }
     return (React.createElement("div", { className: "kuc-textarea-outer" },
-        React.createElement("textarea", { value: value, className: "kuc-textarea", onClick: onClick, onChange: _onChange, disabled: isDisabled, style: { width: sizeConfig.textAreaWidth + 'px', height: sizeConfig.textAreaHeight + 'px' } }),
+        React.createElement("textarea", { value: value, placeholder: placeholder, className: "kuc-textarea", onClick: onClick, onChange: _onChange, disabled: isDisabled, style: { width: sizeConfig.textAreaWidth + 'px', height: sizeConfig.textAreaHeight + 'px' } }),
         React.createElement("div", { className: "kuc-textarea-resize", style: { transform: "translate(" + sizeConfig.translateX + "px, " + sizeConfig.translateY + "px)" }, role: "button", tabIndex: 0, onMouseDown: function () {
                 setIsResizing(true);
             } })));