### Basic Usage of UXCore Tree Component
Source: https://uxcore.github.io/components/button/components/tree
This example illustrates the fundamental setup and usage of the UXCore Tree component. It shows how to define tree nodes, handle node selection events, set default selected keys, enable multiple selections, and expand all nodes by default.
```javascript
import { Tree } from 'uxcore';
const TreeNode = Tree.TreeNode;
function handleSelect(e) {
console.log(e.event, e.node, 'selected:', e.selected);
}
ReactDOM.render(
,
document.getElementById('components-tree-demo-basic')
);
```
--------------------------------
### Dynamic UXCore Progress Bar Display
Source: https://uxcore.github.io/components/button/components/progress
Illustrates the setup for a dynamic UXCore Progress bar, indicating its ability to update visually. The snippet shows the beginning of a class definition for dynamic properties.
```javascript
(function(){'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.wri
```
--------------------------------
### Render Basic Tabs Component with CommonJS
Source: https://uxcore.github.io/components/button/components/tabs
A general example demonstrating the rendering of a basic Tabs component using CommonJS `require` syntax, with an `onChange` callback. This shows a common setup for UXCore Tabs.
```JavaScript
const Tabs = require('uxcore-tabs');
const TabPane = Tabs.TabPane;
const callback = function (key) {
};
ReactDOM.render(
(
firstsecondthird
),
document.getElementById('t2'));
```
--------------------------------
### Miniature Steps Component Example
Source: https://uxcore.github.io/components/button/components/steps
Demonstrates a basic miniature steps component with four steps, rendered into a specific DOM element. This example uses the 'bottom-desc' type for the steps bar.
```javascript
import Steps, { Step } from 'uxcore-steps';
ReactDOM.render(
, document.getElementById('components-steps-demo-mini'));
```
--------------------------------
### Install UXCore npm Package
Source: https://uxcore.github.io/components/button/start/base
This command installs the UXCore library from npm and saves it as a dependency in your project's package.json file.
```Shell
npm install uxcore --save
```
--------------------------------
### JavaScript Component Setup for UXCore Form Demo
Source: https://uxcore.github.io/components/button/components/form
This JavaScript snippet provides the foundational setup for a React component, including helper functions for class property definition and constructor checks, typically used in transpiled ES6+ code for React applications. It also includes a 'require' statement for 'uxcore'. Note: The provided snippet is truncated.
```javascript
(function(){'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _uxcore = require('uxcore');
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : sel
```
--------------------------------
### Basic Line Progress Bar Usage (React JSX)
Source: https://uxcore.github.io/components/button/components/progress
Demonstrates the fundamental usage of the Line progress component from 'uxcore-progress'. Examples include displaying different percentages, active and exception statuses, and controlling information visibility.
```React JSX
import { Line } from 'uxcore-progress';;
ReactDOM.render(
, document.getElementById('components-progress-demo-basic'));
```
--------------------------------
### Render Basic Steps Component
Source: https://uxcore.github.io/components/button/components/steps
Demonstrates a simple steps bar with current step and bottom descriptions, guiding users through a basic process.
```jsx
import Steps, { Step } from 'uxcore-steps';
ReactDOM.render(
, document.getElementById('components-steps-demo-basic'));
```
--------------------------------
### CSS Styling for Head Example
Source: https://uxcore.github.io/components/button/components/badge
Defines basic CSS styles for a `.head-example` class, including dimensions, border-radius, display, and background color.
```css
.head-example {
width: 50px;
height: 50px;
border-radius: 3px;
display: inline-block;
background: #e8e8e8;
}
```
--------------------------------
### API Documentation for Mention Component
Source: https://uxcore.github.io/components/button/components/mention
Details the methods and properties available for the Mention component, used for formatting and displaying mention-related data.
```APIDOC
Mention:
Methods:
formatter(arr):
Description: format the data form source.
panelFormatter(obj):
Description: customize the panel display.
onChange(e, value):
Description: onChange事件。
Props:
prefixCls:
Type: string
Default: kuma-mention
Description: class prefix
source:
Type: array or function
Default: []
Description: data source for mention content
delay:
Type: number
Default: 100
Description: debounce of the request to data source
matchRange:
Type: array
Default: [2, 8]
Description: only match the string after delimiter which the length in this range
formatter:
Type: function
Description: format the data form source
panelFormatter:
Type: function
Description: customize the panel display
onChange:
Type: function(e, value)
Description: trigger when editor content change
```
--------------------------------
### Basic Select Component Usage
Source: https://uxcore.github.io/components/button/components/select2
A minimal example demonstrating the fundamental structure of the Select component with a single Option.
```jsx
```
--------------------------------
### Vertical Steps Component Example
Source: https://uxcore.github.io/components/button/components/steps
Demonstrates a simple vertical steps bar. Note: The provided code snippet is incomplete and only shows the beginning of a variable declaration.
```javascript
var steps =
```
--------------------------------
### API Documentation for InputEditor Component
Source: https://uxcore.github.io/components/button/components/mention
Outlines the API for the InputEditor component, focusing on methods for an input field with mention capabilities.
```APIDOC
InputEditor:
Methods:
mentionFormatter(obj):
Description: customize the insert content with this function.
onChange(e, value):
Description: Callback invoked when the editor's content has been changed.
onAdd(display, originData):
Description: Callback invoked when a mention has been added.
Props:
(No specific props table provided in the input text for InputEditor)
```
--------------------------------
### TreeSelect Component Props API Reference
Source: https://uxcore.github.io/components/button/components/tree-select
Detailed API documentation for the properties available on the UXCore TreeSelect component, including their types, default values, and descriptions.
```APIDOC
TreeSelect props:
className:
description: additional css class of root dom node
type: String
default: ''
prefixCls:
description: prefix class
type: String
default: 'uxcore-tree-select'
animation:
description: dropdown animation name. only support slide-up now
type: String
default: ''
transitionName:
description: dropdown css animation name
type: String
default: ''
choiceTransitionName:
description: css animation name for selected items at multiple mode
type: String
default: ''
dropdownMatchSelectWidth:
description: whether dropdown's with is same with select
t
```
--------------------------------
### Render UXCore Circle Progress Components
Source: https://uxcore.github.io/components/button/components/progress
Demonstrates rendering multiple UXCore Circle components, showcasing different progress percentages and statuses like 'success' and 'showInfo' within inline-block containers.
```javascript
, document.getElementById('components-progress-demo-circle'));
```
--------------------------------
### Get Popover Demo Button Element
Source: https://uxcore.github.io/components/button/components/popover
This JavaScript snippet demonstrates how to obtain a reference to the DOM element of a specific Popover demo button using its ID. This is typically used for initialization or interaction with the component.
```javascript
document.getElementById('components-popover-demo-button')
```
--------------------------------
### Customize Content for UXCore EmptyData Component
Source: https://uxcore.github.io/components/button/components/empty-data
This example demonstrates how to provide custom content within the `EmptyData` component. By passing children elements, you can include custom text, links, or other React components to guide users, such as suggesting actions like 'add target'.
```javascript
import { EmptyData } from 'uxcore';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
);
}
}
ReactDOM.render(
, document.getElementById('components-empty-data-demo-custom'));
```
--------------------------------
### Demonstrating Responsive Grid Layouts with CSS and HTML
Source: https://uxcore.github.io/components/button/css/layout
This snippet illustrates the use of `.col-md-*` classes within `.kuma-row` to create responsive grid layouts. It includes CSS styling for visual clarity and multiple HTML `div` elements demonstrating various column width combinations that stack vertically on small screens and arrange horizontally on medium screens and above.
```html
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
.col-md-6
.col-md-6
```
--------------------------------
### React Card Component Usage Example with Form Controls
Source: https://uxcore.github.io/components/button/components/card
Demonstrates how to integrate the UXCore Card component within a React application, using Form and SwitchFormField components to dynamically control Card properties like collapse icon visibility and content padding. Includes the basic setup for rendering the component.
```JSX
),
className: 'card-demo',
showCollapseIcon,
contentPaddingSize: hasContentPadding ? 'middle' : 'none',
};
return (
Card content
Card content
Card content
);
}
}
ReactDOM.render(
, document.getElementById('components-card-demo-advanced'));
```
--------------------------------
### Implement UXCore CascadeSelect with Hierarchical Options
Source: https://uxcore.github.io/components/button/components/cascade-select
This snippet illustrates the implementation of the `CascadeSelect` component from the `uxcore` library in React applications. It demonstrates how to define hierarchical options, manage component state, and render the component with various properties like `defaultValue`, `options`, `clearable`, and an `onChange` handler. The first example shows a transpiled ES5 structure with a complete rendering setup but relies on an externally defined `options` variable. The second provides a complete ES6 `options` definition and class structure, but its `render` method is truncated.
```javascript
var Demo = function (_React$Component) {
_inherits(Demo, _React$Component);
function Demo(props) {
_classCallCheck(this, Demo);
var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));
_this.state = {
xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],
testValue: 1
};
return _this;
}
_createClass(Demo, [{
key: 'render',
value: function render() {
return React.createElement(
'div',
{ className: 'demo-wrap' },
React.createElement(_uxcore.CascadeSelect, {
defaultValue: ['alibaba', 'platform', 'fe'],
options: options,
clearable: true,
onChange: function onChange(value, selected) {
return console.log(value, selected);
}
})
);
}
}]);
return Demo;
}(React.Component);
ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-select-demo-clear'));
```
```javascript
import { CascadeSelect } from 'uxcore';
const options = [{
value: 'alibaba',
label: '阿里巴巴',
children: [{
value: 'platform',
label: '企业智能事业部',
children: [{
value: 'fe',
label: '前端开发',
}],
}],
}, {
value: 'beijing',
label: '日本',
children: [{
value: 'xicheng',
label: '西城',
children: [{
value: 'zhonggc',
label: '中观村大街',
}],
}],
}, {
value: 'tianjin',
label: '天津',
children: [{
value: 'heping',
label: '和平区',
children: [{
value: 'nanjinglu',
label: '南京路',
}],
}, {
value: 'hexi',
label: '河西区',
children: [{
value: 'dagu',
label: '大沽路',
}],
}],
}, {
value: 'zhejiang',
label: '浙江',
children: [{
value: 'hangzhou',
label: '杭州',
children: [{
value: 'xihu',
label: '西湖',
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
children: [{
value: 'nanjing',
label: '南京',
children: [{
value: 'zhonghuamen',
label: '中华门',
}],
}],
}];
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],
testValue: 1,
};
}
render() {
return (
\n \n {text.map((item, index) => )}\n \n
\n );\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('components-multi-select-demo-basic'));
```
--------------------------------
### React MultiSelect Component Disabled State
Source: https://uxcore.github.io/components/button/components/multi-select
Illustrates how to render the UXCore MultiSelect component in a disabled state, preventing user interaction. This example also includes a placeholder text for the component.
```javascript
import classnames from 'classnames';;
import { MultiSelect } from 'uxcore';
const Item = MultiSelect.Item;
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ['item2', 'item15'],
disabled: false,
};
}
handleChange(value) {
this.setState({
value,
disabled: false,
});
console.log('onChange', arguments);
}
handleSubmit() {
console.log('onSubmit', arguments);
}
render() {
const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',
'天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',
'春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',
'云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];
return (
{text.map((item, index) => )}
);
}
}
ReactDOM.render(
,
document.getElementById('components-multi-select-demo-disable'));
```
--------------------------------
### CascadeMultiModal Props.config API and Example
Source: https://uxcore.github.io/components/button/components/cascade-multi-select
Documents the `config` prop for `CascadeMultiModal`, which allows customization of checkable behavior for each level in the cascade. Includes examples demonstrating how to define a configuration array to control checkability.
```APIDOC
Description: Configuration for each level of the cascade.
Example (Three-level horizontal cascade multi-select):
const config = [{
// 可以为空
}, {
// 设置第二级不可选
checkable: false,
}, {
}];
Note: If config is not provided, checkable: true is default.
Each column's config can specify only necessary keys.
Full config example:
const config = [{
checkable: true,
}, {
checkable: true,
}, {
checkable: true,
}];
```
--------------------------------
### CascadeMultiModal Props.value API and Example
Source: https://uxcore.github.io/components/button/components/cascade-multi-select
Explains the `value` prop, which allows external control over the selected items in the `CascadeMultiSelect` component. It expects an array of selected values. An example shows how to pass a value array to the component.
```APIDOC
Description: The value prop can be controlled externally.
Example Value:
const value = ['xihu', 'bingjiang'];
Usage Example:
;
```
--------------------------------
### Basic Usage of UXCore Formatter
Source: https://uxcore.github.io/components/button/components/formatter
Demonstrates how to import the `uxcore-formatter` library and use its `date` function for basic date formatting.
```javascript
const Formatter = require('uxcore-formatter');
console.log(Formatter.date(new Date(), 'YYYY-MM-DD'));
```
--------------------------------
### Table Component API and Props Reference
Source: https://uxcore.github.io/components/button/components/pagination
Detailed API and property documentation for the Table component, outlining available methods, configuration options, and data structures.
```APIDOC
API:
- For Inline Editing
- Data Retrieval
- Create a CellField
- For Tree Table
- Other API
Props:
- For Collapse/Expand
- For Tree Mode
- For Inline Editing Table
- Column Configuration (jsxcolumns)
- Column Configuration Examples
Column Configuration Examples 2 (with column grouping, since ver. 1.3.0)
rowSelection Examples
Return Data Format:
- ActionBar Configuration Examples
- Actions Configuration Examples
- Support for Multiple Rows
```
--------------------------------
### Limit Maximum Selections in UXCore MultiSelect
Source: https://uxcore.github.io/components/button/components/multi-select
Illustrates how to restrict the number of selectable items in the MultiSelect component using the `maxSelect` prop. In this example, users can select a maximum of 5 items, preventing further selections once the limit is reached.
```JavaScript
import classnames from 'classnames';;\n\nimport { MultiSelect } from 'uxcore';\n\nconst Item = MultiSelect.Item;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: ['item2', 'item15'],\n disabled: false,\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n disabled: false,\n });\n console.log('onChange', arguments);\n }\n handleSubmit() {\n console.log('onSubmit', arguments);\n }\n\n render() {\n const text = ['汉皇重色思倾国', '御宇多年求不得', '杨家有女初长成', '养在深闺人未识',\n '天生丽质难自弃', '一朝选在君王侧', '回眸一笑百媚生', '六宫粉黛无颜色',\n '春寒赐浴华清池', '温泉水滑洗凝脂', '侍儿扶起娇无力', '始是新承恩泽时',\n '云鬓花颜金步摇', '芙蓉帐暖度春宵', '春宵苦短日高起', '从此君王不早朝'];\n\n return (\n
\n \n {text.map((item, index) => )}\n \n
\n );\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('components-multi-select-demo-max'));
```
--------------------------------
### Basic Circular Progress Bar Usage (React JSX)
Source: https://uxcore.github.io/components/button/components/progress
Illustrates the basic implementation of the Circle progress component. Examples show different percentages, success and exception statuses, and how to control the display of progress information.
```React JSX
import { Circle } from 'uxcore-progress';;
ReactDOM.render(
, document.getElementById('components-progress-demo-circle'));
```
--------------------------------
### Basic Usage of UXCore Collapse Component
Source: https://uxcore.github.io/components/button/components/collapse
This example demonstrates the basic usage of the UXCore Collapse component in a React application. It shows how to import and use the Collapse and Panel components, set a default active key, and handle change events. Multiple panels can be expanded simultaneously, with the first panel expanded by default.
```javascript
import Collapse, { Panel } from 'uxcore-collapse';
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
class Demo extends React.Component {
handleChange(key) {
console.log(key);
}
render() {
return (
```
--------------------------------
### CascadeMultiModal Props.options API and Example
Source: https://uxcore.github.io/components/button/components/cascade-multi-select
Details the structure of the `options` prop, which defines the hierarchical data for the cascade multi-select. Each option requires `value` and `label`, and can optionally have `children` for nested levels. An example demonstrates a typical nested options structure.
```APIDOC
Prop: value
Description: 选项的值
Type: String
Required: true
Default: ""
Prop: label
Description: 选项的名称
Type: String
Required: true
Default: ""
Prop: children
Description: 选项的子项集
Type: Array
Required: false
Default: []
Example:
const options = [{
value: 'zhejiang',
label: '浙江',
children: [{
value: 'hangzhou',
label: '杭州',
children: [{
value: 'xihu',
label: '西湖',
}],
}],
}, {
value: 'jiangsu',
label: '江苏',
children: [{
value: 'nanjing',
label: '南京',
children: [{
value: 'zhonghuamen',
label: '中华门',
}],
}],
}];
```
--------------------------------
### Uploader Component API Reference
Source: https://uxcore.github.io/components/button/index
Detailed API documentation for the Uploader component, outlining its methods, properties, and event handling. Includes specific formats for fileList and onChange event parameters.
```APIDOC
Uploader API:
Methods:
reset(): Resets the uploader state.
Properties:
fileList:
Description: Minimum format for fileList. This format is designed to allow the onChange event's return value to be directly passed back to fileList.
Events:
onChange:
Description: Describes the various enumerated formats for the fileList parameter returned by the onChange event.
Other Events:
Description: Additional events supported by the Uploader component.
```
--------------------------------
### Basic Usage of UXCore TreeSelect Component in React
Source: https://uxcore.github.io/components/button/components/tree-select
This example demonstrates the fundamental implementation of the UXCore TreeSelect component. It shows how to generate hierarchical data, manage the selected value in the component's state, and render a single-select TreeSelect with custom styles and placeholders.
```javascript
import { TreeSelect } from 'uxcore';
function generateData(x = 3, y = 2, z = 1, gData = []) {
// x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）
function _loop(_level, _preKey, _tns) {
const preKey = _preKey || '0';
const tns = _tns || gData;
const children = [];
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`;
tns.push({ label: `${key}-label`, value: `${key}-value`, key, disabled: key === '0-0-0-1' });
if (i < y) {
children.push(key);
}
}
if (_level < 0) {
return tns;
}
const __level = _level - 1;
children.forEach((key, index) => {
tns[index].children = [];
return _loop(__level, key, tns[index].children);
});
}
_loop(z);
return gData;
}
const gData = generateData();
class BasicDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: '0-0-0-label',
value: '0-0-0-value',
};
}
onChange(value) {
this.setState({ value });
}
render() {
return (请下拉选择}
searchPlaceholder="please search"
showSearch={false} allowClear treeLine={false}
inputValue={this.state.inputValue}
value={this.state.value}
treeData={gData}
treeNodeFilterProp="label"
filterTreeNode={false}
onChange={this.onChange.bind(this)}
/>);
}
}
ReactDOM.render(
,
document.getElementById('components-tree-select-demo-basic')
);
```
--------------------------------
### React Form Component Rendering Example
Source: https://uxcore.github.io/components/button/components/form
Demonstrates basic rendering of a React Form component with interactive buttons to modify props, change mode, and force refresh. It also shows how to mount the component into a specific DOM element.
```JavaScript
);
}
}
ReactDOM.render(, document.getElementById('components-form-demo-comp'));
```
--------------------------------
### React Controlled TimePicker Component Example
Source: https://uxcore.github.io/components/button/components/time-picker
This example demonstrates how to use the `uxcore` TimePicker component in a React application as a controlled component. It initializes the TimePicker with the current time and updates the component's state when the value changes, logging the new time to the console.
```javascript
import { TimePicker } from 'uxcore';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
value: new Date().getTime(),
};
}
render() {
return (
{
console.log(value);
this.setState({ value });
}}
/>
);
}
}
ReactDOM.render(, document.getElementById('components-time-picker-demo-control'));
```
--------------------------------
### Dynamic Progress Bar with Interactive Controls (React JSX)
Source: https://uxcore.github.io/components/button/components/progress
Provides an example of an interactive progress bar that can be dynamically updated. It includes a React component with methods to increase and decrease the progress percentage using buttons, showcasing both line and circular progress types.
```React JSX
import { Line, Circle } from 'uxcore-progress';;
import { Button } from 'uxcore';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
percent: 0,
};
}
increase() {
let percent = this.state.percent + 10;
if (percent > 100) {
percent = 100;
}
this.setState({ percent });
}
decline() {
let percent = this.state.percent - 10;
if (percent < 0) {
percent = 0;
}
this.setState({ percent });
}
render() {
return (
);
}
}
ReactDOM.render(
, document.getElementById('components-progress-demo-dynamic'));
```
--------------------------------
### Uxcore Drawer Component: Comprehensive Usage Demo
Source: https://uxcore.github.io/components/button/components/drawer
A complete React component ('Demo') showcasing various configurations of the 'uxcore-drawer' component. It includes examples for basic display, left-side navigation, and integration with forms, demonstrating state management for visibility and mode changes, and custom footer/closable options.
```javascript
import Button from 'uxcore-button';
import Form from 'uxcore-form';
import Drawer from 'uxcore-drawer';
const {
Constants,
InputFormField: Input,
DateFormField: Date,
TextAreaFormField: TextArea,
Validators,
} = Form;
const text = "\n A dog is a type of domesticated animal.\n Known for its loyalty and faithfulness,\n it can be found as a welcome guest in many households across the world.\n";
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
basicVisible: false,
menuVisible: false,
visible: false,
mode: Constants.MODE.EDIT,
zoneVisible: false,
};
this.handleChangeMode = this.handleChangeMode.bind(this);
this.handleOk = this.handleOk.bind(this);
this.showDrawer = this.showDrawer.bind(this);
this.closeDrawer = this.closeDrawer.bind(this);
}
handleChangeMode() {
const { mode } = this.state;
this.setState({
mode: mode === Constants.MODE.EDIT ? Constants.MODE.VIEW : Constants.MODE.EDIT,
});
}
handleOk() {
this.closeDrawer();
}
showDrawer(state) {
this.setState({
[state]: true,
});
}
closeDrawer(state) {
this.setState({
[state]: false,
});
}
render() {
const {
visible, mode, basicVisible, menuVisible, zoneVisible,
} = this.state;
return (