utils_react-nexacro_components.js
import React from "react";
const createElement = React.createElement;
/**
* @file
* 넥사크로 컴포넌트에 대응하는 React 래퍼 컴포넌트 모음.
*
* 각 컴포넌트는 `react-reconciler` 호스트 환경에서 처리되는
* 넥사크로 전용 타입 문자열(`nx-*`)을 사용하며,
* JSX 또는 `React.createElement`로 사용할 수 있다.
*
* 공통 props:
* @property {string} [id] 컴포넌트 ID (미지정 시 UUID 자동 생성)
* @property {number} [left] 좌측 위치 (px)
* @property {number} [top] 상단 위치 (px)
* @property {number} [width] 너비 (px)
* @property {number} [height] 높이 (px)
* @property {number} [right] 우측 위치 (px, width 대신 사용)
* @property {number} [bottom] 하단 위치 (px, height 대신 사용)
* @property {boolean} [visible] 표시 여부
* @property {boolean} [enable] 활성화 여부
* @property {string} [styleid] 스타일 ID.
*/
/**
* 넥사크로 Div 컴포넌트.
* 자식 컴포넌트를 포함할 수 있는 컨테이너.
*
* @function NxDiv
* @param {Object} props
* @param {React.ReactNode} [props.children]
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxDiv left={0} top={0} width={400} height={300}>
* <NxButton
* id="btn"
* left={10}
* top={10}
* width={100}
* height={30}
* text="확인"
* />
* </NxDiv>;
*
*/
export function NxDiv(props) {
return createElement("nx-div", props);
}
/**
* 넥사크로 Panel 컴포넌트.
* 자식 컴포넌트를 포함할 수 있는 패널 컨테이너.
*
* @function NxPanel
* @param {Object} props
* @param {string} [props.text]
* 패널 제목 텍스트
* @param {React.ReactNode} [props.children]
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxPanel id="pnl" left={0} top={0} width={400} height={300} text="패널 제목">
* <NxButton
* id="btn"
* left={10}
* top={10}
* width={100}
* height={30}
* text="확인"
* />
* </NxPanel>;
*
*/
export function NxPanel(props) {
return createElement("nx-panel", props);
}
/**
* 넥사크로 Static 컴포넌트 (레이블).
*
* @function NxStatic
* @param {Object} props
* @param {string} [props.text] 표시할 텍스트
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxStatic
* id="lbl"
* left={10}
* top={10}
* width={200}
* height={24}
* text="안녕하세요"
* />;
*
*/
export function NxStatic(props) {
return createElement("nx-static", props);
}
/**
* 넥사크로 Button 컴포넌트.
*
* @function NxButton
* @param {Object} props
* @param {string} [props.text] 버튼 텍스트
* @param {function} [props.onClick] 클릭 이벤트 핸들러 `(obj, e) => void`
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxButton
* id="btn_ok"
* left={10}
* top={50}
* width={80}
* height={30}
* text="확인"
* onClick={(obj, e) => {
* nexacro.alert("클릭!");
* }}
* />;
*
*/
export function NxButton(props) {
return createElement("nx-button", props);
}
/**
* 넥사크로 Edit 컴포넌트 (단일 행 입력).
*
* @function NxEdit
* @param {Object} props
* @param {string} [props.value] 현재 값
* @param {string} [props.edittype] 입력 타입 (normal, password, number 등)
* @param {function} [props.onChanged] 값 변경 이벤트 `(obj, e) => void`
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxEdit
* id="edt_name"
* left={10}
* top={10}
* width={200}
* height={24}
* value={name}
* onChanged={(obj, e) => setName(e.postvalue)}
* />;
*
*/
export function NxEdit(props) {
return createElement("nx-edit", props);
}
/**
* 넥사크로 TextArea 컴포넌트 (다중 행 입력).
*
* @function NxTextArea
* @param {Object} props
* @param {string} [props.value] 현재 값
* @param {function} [props.onChanged] 값 변경 이벤트 `(obj, e) => void`
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxTextArea
* id="ta_memo"
* left={10}
* top={40}
* width={300}
* height={100}
* value={memo}
* onChanged={(obj, e) => setMemo(e.postvalue)}
* />;
*
*/
export function NxTextArea(props) {
return createElement("nx-textarea", props);
}
/**
* 넥사크로 CheckBox 컴포넌트.
*
* @function NxCheckBox
* @param {Object} props
* @param {string} [props.text] 체크박스 레이블
* @param {string} [props.value] 현재 값 ("1"/"0" 또는
* checkedvalue/uncheckedvalue)
* @param {function} [props.onChanged] 값 변경 이벤트 `(obj, e) => void`
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxCheckBox
* id="chk_agree"
* left={10}
* top={10}
* width={150}
* height={24}
* text="동의합니다"
* value={agreed ? "1" : "0"}
* onChanged={(obj, e) => setAgreed(e.postvalue === "1")}
* />;
*
*/
export function NxCheckBox(props) {
return createElement("nx-checkbox", props);
}
/**
* 넥사크로 Combo 컴포넌트 (드롭다운 선택).
*
* @function NxCombo
* @param {Object} props
* @param {string} [props.value] 현재 선택 값
* @param {string} [props.codecolumn] 코드 컬럼명
* @param {string} [props.datacolumn] 표시 컬럼명
* @param {function} [props.onItemChanged] 항목 변경 이벤트 `(obj, e) => void`
* @param {function} [props.onDropDown] 드롭다운 열림 이벤트 `(obj, e) => void`
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxCombo
* id="cmb_dept"
* left={10}
* top={10}
* width={200}
* height={24}
* codecolumn="dept_cd"
* datacolumn="dept_nm"
* onItemChanged={(obj, e) => setDept(e.postvalue)}
* />;
*
*/
export function NxCombo(props) {
return createElement("nx-combo", props);
}
/**
* 넥사크로 Calendar 컴포넌트 (날짜 선택).
*
* @function NxCalendar
* @param {Object} props
* @param {string} [props.value] 현재 날짜 값 (YYYYMMDD)
* @param {function} [props.onChanged] 날짜 변경 이벤트 `(obj, e) => void`
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxCalendar
* id="cal_date"
* left={10}
* top={10}
* width={120}
* height={24}
* value={date}
* onChanged={(obj, e) => setDate(e.postvalue)}
* />;
*
*/
export function NxCalendar(props) {
return createElement("nx-calendar", props);
}
/**
* 넥사크로 Spin 컴포넌트 (숫자 증감 입력).
*
* @function NxSpin
* @param {Object} props
* @param {string} [props.value] 현재 값
* @param {function} [props.onChanged] 값 변경 이벤트 `(obj, e) => void`
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxSpin
* id="spn_year"
* left={10}
* top={10}
* width={80}
* height={24}
* value={year}
* onChanged={(obj, e) => setYear(e.postvalue)}
* />;
*
*/
export function NxSpin(props) {
return createElement("nx-spin", props);
}
/**
* 넥사크로 Grid 컴포넌트.
*
* @function NxGrid
* @param {Object} props
* @param {string} [props.binddataset] 바인딩할 데이터셋 ID.
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxGrid
* id="grd_list"
* left={0}
* top={40}
* width={600}
* height={300}
* binddataset="ds_list"
* />;
*
*/
export function NxGrid(props) {
return createElement("nx-grid", props);
}
/**
* 넥사크로 Tab 컴포넌트.
*
* @function NxTab
* @param {Object} props
* @returns {React.ReactElement}
* @memberof $react
* @example
* React.createElement(NxTab, {
* id: "tab_main",
* left: 0,
* top: 0,
* width: 600,
* height: 400,
* });
*
*/
export function NxTab(props) {
return createElement("nx-tab", props);
}
/**
* 넥사크로 Image 컴포넌트.
*
* @function NxImage
* @param {Object} props
* @param {string} [props.src] 이미지 경로
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxImage
* id="img_logo"
* left={10}
* top={10}
* width={100}
* height={50}
* src="images/logo.png"
* />;
*
*/
export function NxImage(props) {
return createElement("nx-image", props);
}
/**
* 넥사크로 ProgressBar 컴포넌트.
*
* @function NxProgressBar
* @param {Object} props
* @param {number} [props.value] 현재 진행 값 (0~100)
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxProgressBar
* id="pgb_load"
* left={10}
* top={10}
* width={300}
* height={20}
* value={progress}
* />;
*
*/
export function NxProgressBar(props) {
return createElement("nx-progressbar", props);
}
/**
* 넥사크로 ListBox 컴포넌트.
*
* @function NxListBox
* @param {Object} props
* @param {string} [props.binddataset] 바인딩할 데이터셋 ID.
* @param {function} [props.onItemChanged] 항목 변경 이벤트 `(obj, e) => void`
* @returns {React.ReactElement}
* @memberof $react
* @example
* <NxListBox
* id="lst_items"
* left={10}
* top={10}
* width={200}
* height={150}
* binddataset="ds_items"
* onItemChanged={(obj, e) => setItem(e.postvalue)}
* />;
*
*/
export function NxListBox(props) {
return createElement("nx-listbox", props);
}