forked from community/device-mgt-core
Generate UI component for profile configuration in Add Policy view using json See merge request entgra/carbon-device-mgt!404feature/appm-store/pbac
Dharmakeerthi Lasantha
5 years ago
commit
e76a17fe45
@ -1,302 +1,268 @@
|
||||
import React from 'react';
|
||||
import {Tabs, Row, Col, Switch, Menu,Input, Typography, Form, Checkbox, Select} from "antd";
|
||||
import {Tabs, Row, Col, Switch, Menu,Input, Typography, Form, Checkbox, Select,
|
||||
Tooltip, Icon, Collapse, Alert, Upload, Button,Radio} from "antd";
|
||||
import {withConfigContext} from "../../context/ConfigContext";
|
||||
const { Title } = Typography;
|
||||
import "../../pages/Dashboard/Policies/policies.css";
|
||||
import jsonResponse from "./configuration";
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
const { TabPane } = Tabs;
|
||||
const {Option} = Select;
|
||||
const {Panel} = Collapse;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const policyConfigurationsList = jsonResponse.PolicyConfigurations;
|
||||
|
||||
class ConfigureProfile extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.config = this.props.context;
|
||||
this.policies = policyConfigurationsList.androidPolicy.Policy;
|
||||
this.state = {
|
||||
isDisplayMain: "none",
|
||||
activeKeys: []
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
componentDidMount() {
|
||||
}
|
||||
|
||||
onChange = (e) =>{
|
||||
console.log(`checked = ${e.target.id}`);
|
||||
};
|
||||
|
||||
onChecked = (e,i) =>{
|
||||
if(e){
|
||||
this.setState({
|
||||
isDisplayMain: "block",
|
||||
});
|
||||
}else{
|
||||
this.setState({
|
||||
isDisplayMain: "none",
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
onClickSwitch = (e) =>{
|
||||
|
||||
};
|
||||
|
||||
|
||||
getPanelItems = (panel)=>{
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
return (
|
||||
<div>
|
||||
<Tabs tabPosition={"left"} type={"card"} size={"large"}>
|
||||
<TabPane tab="Passcode Policy" key="1">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Passcode Policy</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF"/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
Enforce a configured passcode policy on Android devices.
|
||||
Once this profile is applied, the device
|
||||
owners won't be able to modify the password settings on their devices.
|
||||
</Row>
|
||||
<div>
|
||||
<Form>
|
||||
<Form.Item >
|
||||
{getFieldDecorator('allowSimpleValue', {
|
||||
})(<Checkbox>Allow simple value</Checkbox>)}
|
||||
</Form.Item>
|
||||
<Form.Item >
|
||||
{getFieldDecorator('remember', {
|
||||
})(<Checkbox>Require alphanumeric value</Checkbox>)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Minimum passcode length" style={{display: "block"}}>
|
||||
{getFieldDecorator('minPasscodeLength', {
|
||||
initialValue: '0'
|
||||
panel.map((item,k)=>{
|
||||
switch(item._type){
|
||||
case "select":
|
||||
return(
|
||||
<Form.Item key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.Label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{display: "block"}}>
|
||||
{getFieldDecorator(`${item._id}`, {
|
||||
initialValue: `${item.Optional.Option[0]}`
|
||||
})(
|
||||
<Select>
|
||||
<Option key="0">None</Option>
|
||||
<Option key="4">4</Option>
|
||||
<Option key="5">5</Option>
|
||||
<Option key="6">6</Option>
|
||||
<Option key="7">7</Option>
|
||||
<Option key="8">8</Option>
|
||||
<Option key="9">9</Option>
|
||||
<Option key="10">10</Option>
|
||||
<Option key="11">11</Option>
|
||||
<Option key="12">12</Option>
|
||||
<Option key="13">13</Option>
|
||||
<Option key="14">14</Option>
|
||||
<Option key="15">15</Option>
|
||||
{item.Optional.Option.map((option)=>{
|
||||
return(
|
||||
<Option key={option}>{option}</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Minimum number of complex characters" style={{display: "block"}}>
|
||||
{getFieldDecorator('minComplexChar', {
|
||||
initialValue: '0'
|
||||
);
|
||||
case "input":
|
||||
return(
|
||||
<Form.Item key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.Label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{display: "block"}}>
|
||||
{getFieldDecorator(`${item._id}`, {
|
||||
rules: [
|
||||
{
|
||||
pattern: new RegExp(`${item.Optional.rules.regex}`),
|
||||
message: `${item.Optional.rules.validationMsg}`,
|
||||
},
|
||||
],
|
||||
})(
|
||||
<Select>
|
||||
<Option key="0">None</Option>
|
||||
<Option key="1">1</Option>
|
||||
<Option key="2">2</Option>
|
||||
<Option key="3">3</Option>
|
||||
<Option key="4">4</Option>
|
||||
<Option key="5">5</Option>
|
||||
</Select>
|
||||
<Input placeholder={item.Optional.Placeholder}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Maximum passcode age in days* " style={{display: "block"}}>
|
||||
{getFieldDecorator('maxPasscodeAge', {
|
||||
);
|
||||
case "checkbox":
|
||||
return(
|
||||
<Form.Item key={k}>
|
||||
{getFieldDecorator(`${item._id}`, {
|
||||
valuePropName: 'checked',
|
||||
initialValue: `${item.Optional.checked}`,
|
||||
})(
|
||||
<Checkbox
|
||||
// checked={item.Optional.checked}
|
||||
onChange={this.onChange}
|
||||
>
|
||||
<span>
|
||||
{item.Label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
</Checkbox>
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
case "textArea":
|
||||
return(
|
||||
<Form.Item key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.Label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{display: "block"}}>
|
||||
{getFieldDecorator(`${item._id}`, {
|
||||
|
||||
})(
|
||||
<Input/>
|
||||
<TextArea placeholder={item.Optional.Placeholder}
|
||||
rows={item.Optional.Row} />
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Passcode history*" style={{display: "block"}}>
|
||||
{getFieldDecorator('passcodeHistory', {
|
||||
);
|
||||
case "radioGroup":
|
||||
return(
|
||||
<Form.Item key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.Label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
style={{display: "block"}}>
|
||||
{getFieldDecorator(`${item._id}`, {
|
||||
})(
|
||||
<Input/>
|
||||
<Radio.Group>
|
||||
{item.Optional.Radio.map((option)=>{
|
||||
return(
|
||||
<Radio value={option}>{option}</Radio>
|
||||
);
|
||||
})}
|
||||
</Radio.Group>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Maximum number of failed attempts" style={{display: "block"}}>
|
||||
{getFieldDecorator('maxFailedAttemps', {
|
||||
initialValue: '0'
|
||||
);
|
||||
case "title":
|
||||
return(
|
||||
<Title key={k} level={4}>{item.Label} </Title>
|
||||
);
|
||||
case "paragraph":
|
||||
return(
|
||||
<Paragraph key={k} style={{marginTop:20}}>{item.Label} </Paragraph>
|
||||
);
|
||||
case "alert":
|
||||
return(
|
||||
<Alert
|
||||
key={k}
|
||||
description={item.Label}
|
||||
type="warning"
|
||||
showIcon
|
||||
/>
|
||||
);
|
||||
case "upload":
|
||||
return(
|
||||
<Form.Item key={k}
|
||||
label={
|
||||
<span>
|
||||
{item.Label}
|
||||
<Tooltip title={item.tooltip} placement="right">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{getFieldDecorator('upload', {
|
||||
|
||||
})(
|
||||
<Select>
|
||||
<Option key="0">None</Option>
|
||||
<Option key="3">3</Option>
|
||||
<Option key="4">4</Option>
|
||||
<Option key="5">5</Option>
|
||||
<Option key="6">6</Option>
|
||||
<Option key="7">7</Option>
|
||||
<Option key="8">8</Option>
|
||||
<Option key="9">9</Option>
|
||||
<Option key="10">10</Option>
|
||||
</Select>
|
||||
|
||||
<Upload>
|
||||
<Button>
|
||||
<Icon type="upload" /> Click to upload
|
||||
</Button>
|
||||
</Upload>,
|
||||
)}
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane tab="Restrictions" key="2">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Restrictions</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>This configurations can be used to restrict certain settings on an Android device.
|
||||
Once this configuration profile is installed on a device, corresponding users will
|
||||
not be able to modify these settings on their devices.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="Encryption Settings" key="3">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Encryption Settings</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>This configuration can be used to encrypt data on an Android device,
|
||||
when the device is locked and make it readable when the passcode is entered.
|
||||
Once this configuration profile is installed on a device, corresponding users will
|
||||
not be able to modify these settings on their devices.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="Wi-Fi Settings" key="4">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Wi-Fi Settings</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF"/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>This configurations can be used to configure Wi-Fi access on an Android device.
|
||||
Once this configuration profile is installed on a device, corresponding
|
||||
users will not be able to modify these settings on their devices.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="Global Proxy Settings" key="5">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Global Proxy Settings</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>This configurations can be used to set a network-independent global HTTP
|
||||
proxy on an Android device. Once this configuration profile is installed on a device,
|
||||
all the network traffic will be routed through the proxy server.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="Virtual Private Network" key="6">
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})
|
||||
)
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>VPN Settings</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>Configure the OpenVPN settings on Android devices. In order to enable this,
|
||||
device needs to have "OpenVPN for Android" application installed.</p>
|
||||
</Row>
|
||||
</div>
|
||||
<Tabs tabPosition={"left"} size={"large"}>
|
||||
{ this.policies.map((element, i) =>{
|
||||
return(
|
||||
|
||||
<TabPane tab={element.Name} key={i} >
|
||||
{/*<div style={{ height: 800, overflowY: "scroll"}}>*/}
|
||||
{ Object.values(element.Panel).map((panel, j)=>{
|
||||
return(
|
||||
<div key={j} >
|
||||
<div>
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Always On VPN Settings</Title>
|
||||
<Col offset={0} span={14}>
|
||||
<Title level={4}>{panel.title} </Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
<Col offset={8} span={1}>
|
||||
<Switch
|
||||
checkedChildren="ON"
|
||||
unCheckedChildren="OFF"
|
||||
id={i}
|
||||
onClick={this.onClickSwitch}
|
||||
onChange={this.onChecked}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>Configure an always-on VPN connection through a specific VPN client application.</p>
|
||||
</Row>
|
||||
<Row>{panel.description}</Row>
|
||||
</div>
|
||||
<div style={{display: `${this.state.isDisplayMain}`}}>
|
||||
<Form >
|
||||
{this.getPanelItems(panel.PanelItem)}
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
})
|
||||
}
|
||||
</TabPane>
|
||||
<TabPane tab="Certificate Install" key="7">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Certificate Install Settings</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>Configure the certificate install settings on Android devices.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="Work-Profile Configurations" key="8">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Work-Profile Configurations</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>The configurations below can be applied to the devices where the agent
|
||||
is running in Android Work-Profile.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="COSU Profile Configuration" key="9">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>COSU Profile Configuration</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>This policy can be used to configure the profile of COSU Devices.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="Application Restrictions" key="10">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Application Restrictions</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>This configuration can be used to create a black list or white list of applications.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="Runtime Permission Policy" key="11">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Runtime Permission Policy</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>This configuration can be used to set a runtime permission policy to an Android Device.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="System Update Policy (COSU)" key="12">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>System Update Policy (COSU)</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>This configuration can be used to set a passcode policy to an Android Device.
|
||||
Once this configuration profile is installed on a device,
|
||||
corresponding users will not be able to modify these settings on their devices.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tab="Enrollment Application Install" key="13">
|
||||
<Row>
|
||||
<Col offset={0} span={8}>
|
||||
<Title level={4}>Enrollment Application Install</Title>
|
||||
</Col>
|
||||
<Col offset={12} span={2} >
|
||||
<Switch checkedChildren=" ON " unCheckedChildren="OFF" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>This configuration can be used to install applications during Android device enrollment.</p>
|
||||
</Row>
|
||||
</TabPane>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(Form.create({name: 'add-policy'})(ConfigureProfile));
|
||||
export default withConfigContext(Form.create()(ConfigureProfile));
|
||||
@ -0,0 +1,148 @@
|
||||
/*
|
||||
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
|
||||
*
|
||||
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import axios from "axios";
|
||||
import {Card, Col, Icon, message, notification, Row, Typography} from "antd";
|
||||
import TimeAgo from 'javascript-time-ago'
|
||||
// Load locale-specific relative date/time formatting rules.
|
||||
import en from 'javascript-time-ago/locale/en'
|
||||
import {withConfigContext} from "../../context/ConfigContext";
|
||||
|
||||
const {Text} = Typography;
|
||||
|
||||
let config = null;
|
||||
let apiUrl;
|
||||
|
||||
class SelectPlatform extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
config = this.props.context;
|
||||
TimeAgo.addLocale(en);
|
||||
this.state = {
|
||||
data: [],
|
||||
pagination: {},
|
||||
loading: false,
|
||||
selectedRows: []
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchUsers();
|
||||
}
|
||||
|
||||
onClickCard = (data) =>{
|
||||
console.log(data);
|
||||
this.props.onClickType();
|
||||
};
|
||||
|
||||
//fetch data from api
|
||||
fetchUsers = (params = {}) => {
|
||||
const config = this.props.context;
|
||||
this.setState({loading: true});
|
||||
|
||||
// get current page
|
||||
const currentPage = (params.hasOwnProperty("page")) ? params.page : 1;
|
||||
|
||||
const extraParams = {
|
||||
offset: 10 * (currentPage - 1), //calculate the offset
|
||||
limit: 10,
|
||||
};
|
||||
|
||||
const encodedExtraParams = Object.keys(extraParams)
|
||||
.map(key => key + '=' + extraParams[key]).join('&');
|
||||
|
||||
apiUrl = window.location.origin + config.serverConfig.invoker.uri +
|
||||
config.serverConfig.invoker.deviceMgt +
|
||||
"/device-types";
|
||||
|
||||
//send request to the invokerss
|
||||
axios.get(apiUrl).then(res => {
|
||||
if (res.status === 200) {
|
||||
const pagination = {...this.state.pagination};
|
||||
this.setState({
|
||||
loading: false,
|
||||
data: JSON.parse(res.data.data),
|
||||
pagination,
|
||||
});
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
if (error.hasOwnProperty("response") && error.response.status === 401) {
|
||||
//todo display a popop with error
|
||||
message.error('You are not logged in');
|
||||
window.location.href = window.location.origin + '/entgra/login';
|
||||
} else {
|
||||
notification["error"]({
|
||||
message: "There was a problem",
|
||||
duration: 0,
|
||||
description:"Error occurred while trying to load device types.",
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({loading: false});
|
||||
});
|
||||
};
|
||||
|
||||
handleTableChange = (pagination, filters, sorter) => {
|
||||
const pager = {...this.state.pagination};
|
||||
pager.current = pagination.current;
|
||||
this.setState({
|
||||
pagination: pager,
|
||||
});
|
||||
this.fetch({
|
||||
results: pagination.pageSize,
|
||||
page: pagination.current,
|
||||
sortField: sorter.field,
|
||||
sortOrder: sorter.order,
|
||||
...filters,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
const {data, pagination, loading, selectedRows} = this.state;
|
||||
const { Meta } = Card;
|
||||
const itemCard = data.map((data) =>
|
||||
<Col span={5} key={data.id}>
|
||||
<Card
|
||||
size="default"
|
||||
style={{ width: 150 }}
|
||||
bordered={true}
|
||||
onClick={this.onClickCard}
|
||||
cover={<Icon type="android" key="device-types" style={{color:'#ffffff',
|
||||
backgroundColor:'#4b92db', fontSize: '100px', padding:'20px'}}/>}
|
||||
>
|
||||
<Meta
|
||||
title={data.name}
|
||||
/>
|
||||
|
||||
</Card>
|
||||
</Col>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={16}>
|
||||
{itemCard}
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withConfigContext(SelectPlatform);
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,29 @@
|
||||
.ant-tabs-content {
|
||||
/*height: 120px;*/
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
.ant-tabs-content > .ant-tabs-tabpane {
|
||||
/*background: #000066;*/
|
||||
/*color: #ffffff;*/
|
||||
/*padding: 16px;*/
|
||||
}
|
||||
|
||||
.ant-tabs-bar {
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
.ant-tabs-bar .ant-tabs-tab {
|
||||
border-color: #3498db;
|
||||
background: transparent;
|
||||
/*color: #cc0000;*/
|
||||
|
||||
}
|
||||
|
||||
.ant-tabs-bar .ant-tabs-tab-active {
|
||||
|
||||
/*border-color: #1b3bcc;*/
|
||||
/*background: #3498db;*/
|
||||
/*color: #cc0000;*/
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue